CODEWITHSUNDEEP
javascriptajaxjquery
Alfred
Alfred

Reputation: 21406

keyup(function()) ajax request delay - jQuery

I have a jQuery Ajax request, that I want to call with text input, and so I nested it inside keyup(function(). This works fine.

$("#text_box").keyup(function() {
 //AJAX REQUEST
});

But this behaves buggy sometimes. When I input some text very fast, I am getting results for input word with some last letters of the original input word omitted (may be some fault with browser). I want the ajax request to be sent when there is no input activity for a second, I mean, if I input text very fast and rest for a second (means I made the input). How can I do this?

Upvotes: 3

Views: 7147

Answers (3)

Евгений Антипов
Евгений Антипов

Reputation: 528

omg. for somebody who will search in 2014...

function sendAjax() {
    setTimeout(
        function() {
            $.ajax({
                url: "url.php",
                type: "POST",
                data: data,
                success: function(data) {
                    $("#result").html(data);
                }
            });
        }, 2000);
}

<input onkeyup="function()">

Upvotes: 1

Andreas
Andreas

Reputation: 21881

As you are already using jQuery you could use the debounce plugin from Ben Aleman.

Example from the page

// Bind the not-at-all debounced handler to the keyup event.
  $('input.text').keyup( text_1 );

  // Bind the debounced handler to the keyup event.
  $('input.text').keyup( $.debounce( 250, text_2 ) ); // This is the line you want!

Upvotes: 3

Linus Thiel
Linus Thiel

Reputation: 39223

It sounds as if you get results from a previous ajax call. Use a timer with setTimeout and clearTimeout.

var timer = null;

$("#text_box").keyup(function() {
  if(timer) {
    clearTimeout(timer);
  }

  timer = setTimeout(someFunction, someDelay);
});

Where someFunction is a function which does your ajax call and someDelay is the delay you want to wait before doing the call, after the user has typed, in ms.

Upvotes: 8

Related Questions