I am attempting to follow the advice within this question to fit the following scenario:

On keyup, send an AJAX request to the server with the term in the input field. But if they continue to type, abort any existing AJAX requests so only one request is sent.

Here is my code as it stands:

jQuery(document).ready(function($) {

    var $input      = $('#s'),
        inputVal    = '',
        inputCount  = '';

    function process_asr_request() {
        $.ajax({
            url: MyAjax.ajaxurl,
            data: {
                'action':'pondera_asr_request',
                'inputVal' : inputVal
            },
            success:function(data) {
                $('#search-results').append( data )
            },
            error: function(errorThrown){
                console.log( errorThrown);
            }
        });
    }

    $input.on("keyup", function() {
        // record the value of the input
        inputVal    = $input.val(),
        // check the lenght on the value
        inputCount  = inputVal.length,      
        // define array for ajax requests
        requests    = [];

        // Only process once there are 3 characters
        if (inputCount > 2) {
            // push ajax requests into the array
            requests.push(
                process_asr_request(i)
            );
            // loop through the array of requests
            for(
                var i = 0;
                i < requests.length;
                i++
            )
            // kill any queued requests
            requests[i].abort();
        };
    });
});

I have two questions:

1. Is this approach valid for what I am looking to achieve
2. I get an "Uncaught TypeError: Cannot call method 'abort' of undefined" error with the above code. Where am I going wrong.

I'm fairly new to AJAX so please pardon my naivety.

I am attempting to follow the advice within this question to fit the following scenario:

On keyup, send an AJAX request to the server with the term in the input field. But if they continue to type, abort any existing AJAX requests so only one request is sent.

Here is my code as it stands:

jQuery(document).ready(function($) {

    var $input      = $('#s'),
        inputVal    = '',
        inputCount  = '';

    function process_asr_request() {
        $.ajax({
            url: MyAjax.ajaxurl,
            data: {
                'action':'pondera_asr_request',
                'inputVal' : inputVal
            },
            success:function(data) {
                $('#search-results').append( data )
            },
            error: function(errorThrown){
                console.log( errorThrown);
            }
        });
    }

    $input.on("keyup", function() {
        // record the value of the input
        inputVal    = $input.val(),
        // check the lenght on the value
        inputCount  = inputVal.length,      
        // define array for ajax requests
        requests    = [];

        // Only process once there are 3 characters
        if (inputCount > 2) {
            // push ajax requests into the array
            requests.push(
                process_asr_request(i)
            );
            // loop through the array of requests
            for(
                var i = 0;
                i < requests.length;
                i++
            )
            // kill any queued requests
            requests[i].abort();
        };
    });
});

I have two questions:

1. Is this approach valid for what I am looking to achieve
2. I get an "Uncaught TypeError: Cannot call method 'abort' of undefined" error with the above code. Where am I going wrong.

I'm fairly new to AJAX so please pardon my naivety.

• javascript
• ajax
• performance
• jquery

Share Improve this question Follow edited Jun 20, 2020 at 9:12 CommunityBot 111 silver badge asked Nov 12, 2013 at 17:12 SheixtSheixt 2,6261313 gold badges3838 silver badges6767 bronze badges 5

• 1 Return the XHR in process_asr_request() – Johan Commented Nov 12, 2013 at 17:15
• There's no need to abort it. You can simply ignore it, since AJAX is asynchronous anyway. Instead of requests, just use one request and on a keyup, just overwrite the previous request. – Overcode Commented Nov 12, 2013 at 17:16
• for a better user interface, consider use a 333ms timeout and oninput instead of onkeyup – dandavis Commented Nov 12, 2013 at 17:46
• From what I understand oninput isn't within jQuery yet: stackoverflow./questions/11189136/… – Sheixt Commented Nov 12, 2013 at 18:00
• As for the setTimeout suggestion, where within the code would you remend this would be included? Within the if (inputCount > 2) { statement? – Sheixt Commented Nov 12, 2013 at 18:02

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

Close, just need to return the xhr so you can abort it:

 function process_asr_request(inputVal) {
    return $.ajax({
        url: MyAjax.ajaxurl,
        data: {
            'action':'pondera_asr_request',
            'inputVal' : inputVal
        },
        success:function(data) {
            $('#search-results').append( data )
        },
        error: function(errorThrown){
            console.log( errorThrown);
        }
    });
}

Also this loop would be better written as below, so old xhrs are removed from requests:

var xhr;
while (xhr = requests.pop()) {
        // kill any queued requests
        xhr.abort();
}
requests.push(process_asr_request(inputVal));

Another note, requests should be outside the event loop if you want this to work and you have several globals in this function.

var requests = [];
$input.on("keyup", function() {
    var inputVal    = $input.val(),
    // check the lenght on the value
        inputCount  = inputVal.length;
    //...
});

var currXHR;

function process_asr_request() {

    if(currXHR && currXHR.abort) currXHR.abort();

    currXHR = $.ajax({
        url: MyAjax.ajaxurl,
        data: {
            'action':'pondera_asr_request',
            'inputVal' : inputVal
        },
        success:function(data) {
            $('#search-results').append( data )
        },
        error: function(errorThrown){
            console.log( errorThrown);
        }
    });
}