Multiple ajax Allow only latest call

Question

I have an input box on which there is an ajax request on every key press. so if i enter word "name" there will be 4 successful request. So i actually want only the latest request of executed. so if i enter word "name" there will be only one request which will be the last one.

and i also have a solution for this (this is a simple example with click method)

JS script

var callid = 1;

function ajaxCall (checkval ){
    if(checkval == callid){
        $.ajax({
            type: 'post',
            url: baseurl + "test/call_ajax",
            data: {
                val: "1"
            },
            success: function(data) {
                console.log(data)
            }
        });
    }
}

function call(){
    var send = callid+=1;
    setTimeout( function(){ ajaxCall(send)  } , 500);
}

html script

<a href="#" onclick="call()" > Call ajax </a>

This is working perfectly. But i was think if there is way to refine it a little bit more.

Any ideas :)

No, the script should abort all the previous call except the last one. — Iori, May 01 '13 at 17:38
I was talking about [`abort()`](http://stackoverflow.com/questions/446594/abort-ajax-requests-using-jquery) — epascarello, May 01 '13 at 18:30

score 4 · Accepted Answer · answered May 01 '13 at 17:45

I am sure you are looking some better intent technique for event dispatching.

var eventDispatcher = null;
$('.textbox').keyup(function(){
   if(eventDispatcher) clearTimeout(eventDispatcher);
   eventDispatcher = setTimeout(function(){
       $.ajax({ ... });
   }, 300);
});

score 3 · Answer 2 · answered May 01 '13 at 17:49

You could do your ajax inside of a setTimeout. So you don't need to declare and check an additional variable or write another function like call()

$(document).ready(function () {
    var timer;
    $('#fillMe').keypress(function () {
        clearTimeout(timer);
        timer = setTimeout(function () {
            //replace this with your ajax call
            var content = $('#fillMe').val();
            $('#result').text('You will only see this if the user stopped typing: ' + content);
        }, 1000); // waits 1s before getting executed
    });
});

<input type="text" id="fillMe">
<div id="result"></div>

On every keypress event this clears the timeout and immediately creates a new timeout. This means the content of the setTimeout function only gets executed if the user stopped typing for at least 1 second. Of course 1 second is just the value for the example purpose. You can change it to whatever you want or think is a good time (like 500ms)

See my jsfiddle

score 1 · Answer 3 · answered May 01 '13 at 17:44

setTimeout returns an id that you can store and use to clear the previously set timer:

var timerId;

function call() {
    if (timerId !== undefined) {
        clearTimeout(timerId);  
    } 

    timerId = setTimeout( function() { ajaxCall(send) }, 500);
}

The result of this should be that the ajaxCall method will be called 500ms after the last letter is entered.

Multiple ajax Allow only latest call

3 Answers3