Send a XHR when user "completes" the input instead of keyup

Question

The HTML code: <input id="goTOxQuestion">
The js code:

$("#goTOxQuestion").keyup(function(){
    // send a XHR
})

If the input is 12345,it will send the XHR five times.
In fact, I only want the XHR be executed when I have completed the input. I mean,there is no input( no keydown event ）in 500 milliseconds, rather then it loses faocus.
My incomplete solution:

var isOver = false;
$("#goTOxQuestion").keyup(function(){
    //...
    setTimeout(function(){
        if(isOver){
            //send a XHR
        }
    },500);
})
$("#goTOxQuestion").keydown(function(){
    isOver = false;
})

If a pop up from another webpage show up then it's possible that the input's blur event will trigger which is not an expected behavior. You need to use a button for this, if you want your user to have a good experience with your site. — Ricky Stam, Jan 17 '14 at 08:11
ok, then what is your question here, your code seem to be correct, what error you are getting ? — A.T., Jan 17 '14 at 08:14

score 1 · Answer 1 · answered Jan 17 '14 at 08:07

1

Use setTimeout then:

$("#goTOxQuestion").keyup(function(){
    setTimeout(function(){
        // send a XHR
    }, 1000);
})

answered Jan 17 '14 at 08:07

Jai

74,255
12
74
103

Here is a corresponding fiddle http://jsfiddle.net/m4ABn/8/ It works, but calls alert a couple of times in the end :S – Daniel Fath Jan 17 '14 at 08:34

score 1 · Answer 2 · answered Jan 17 '14 at 08:20

1

The change event seems like a good fit for your needs :

$("#goTOxQuestion").change(function(){
    // send a XHR
})

It will be triggered when the input looses focus and the input value was actually modified.

answered Jan 17 '14 at 08:20

LeGEC

46,477
5
57
104

The event is deferred until the element loses focus.I want the request be sended when I have completed the input ,rather then it lose loses faocus. – ZhouMengkang Jan 17 '14 at 08:25
Could you please explain `when I have completed the input` ? – LeGEC Jan 17 '14 at 08:27
oh,I am sorry ,no input（keydown event ）in 500 milliseconds – ZhouMengkang Jan 17 '14 at 08:39

Salman A · Accepted Answer · 2014-01-17T09:50:35.647

You can use a combination of setTimeout and clearTimeout like this:

var hTimeout;
$("#goTOxQuestion").keyup(function () {
    if (hTimeout) {
        clearTimeout(hTimeout);
    }
    hTimeout = setTimeout(function () {
        // ajax code here
    }, 500);
});

Demo here

Note that the order in which AJAX requests complete is not guaranteed and you will end up with "race conditions".

Regarding your comment, here is a solution from the top of my mind:

// initialize global counter
var xhrCount = 0;
// increment counter when you create an XHR
xhrCount++;
// pass the current value of this
// variable to the success function
// http://stackoverflow.com/q/1552941/87015
$.ajax("/url/", (function (myStamp) {
    console.log("creating success callback #" + myStamp);
    return function () {
        if (myStamp === xhrCount) {
            console.log("firing success handler");
        } else {
            console.log("suppressing success handler");
        }
    }
})(xhrCount));

Note that the order in which AJAX requests complete is not guaranteed....I need the last request.thanks — ZhouMengkang, Jan 17 '14 at 08:49
Detecting if the request was the last one could be a pita. You can try (i) declaring a global counter (ii) increment the counter when AJAX is created (iii) in the success function, compare the current request's number with global counter. — Salman A, Jan 17 '14 at 09:37

score 0 · Answer 4 · answered Jan 17 '14 at 08:06

0

$(document).on('blur',"#goTOxQuestion",function(){
    // send a XHR
});

answered Jan 17 '14 at 08:06

A.T.

24,694
8
47
65

Send a XHR when user "completes" the input instead of keyup

4 Answers4