Problem with settimeout in jQuery with AJAX call

Question

I'm using jQuery AJAX call to dynamically display search results when a user types in a specified set of input boxes. This code works fine and is identical to the doSearch function below, except that it binds directly to the "input.auto" keyup event. But I'm trying to improve it by adding a time delay -- otherwise the call gets fired for each keyup event and some of the calls overlap which leads to very confusing results.

Following this question I came up with this code:

$(document).ready(function() {

var searchTimer = 0;

$('input.auto').keyup(function() {
    if (searchTimer != 0) {
      clearTimeout(searchTimer);
    }

    var length = $(this).val().length;
    searchTimer = setTimeout(doSearch(length), 250);
  });

function doSearch(length) {
    var length = $(this).val().length;
    // check to see if there are more than three characters in the input field
    if (length > 3) {
        //when user enters text, checks and retrieves matches
        $("#messages").hide();
        $("#messages").removeClass().addClass('loading').text('loading suggestions').fadeIn();
        var type = $(this).attr('id');
        switch (type) {
            // depending on type, different target urls are set
        }
        $.post(url,{ term:$(this).val() } ,function(data) {
            // if no suggestions are returned
            if (data=='No matches') {
                $("#messages").fadeTo(200,0.1,function() {
                    $(this).removeClass().addClass('failure').fadeTo(900,1).html(data);
                });
            // if suggestions are returned
            } else {
                $("#messages").removeClass().addClass('success').html(data).animate({height: '250px', opacity:'1'},{queue:false, duration:1500, easing: 'easeOutBounce'});
            }
        });
     }
});
});

Perhaps there is a very simple thing here that I'm missing and it's demonstrating my hazy knowledge of jquery and javascript, but I would appreciate any pointers. (Also, if somebody could explain what "searchtimer" does in this syntax, that would be great as well.)

manji · Accepted Answer · 2011-04-11 18:32:16Z

1

the first arg to setTimeout is a function pointer but you're giving the result of the call to doSearch, change it to:

setTimeout(doSearch, 250);

and in doSearch, remove the length arg, as it's overridden by the local length var:

function doSearch() {
    var length = $(this).val().length;
    // check to see if there are more than three characters in the input field
    ...

searchTimer is an id for the timeout you fired. It's used to clear it later:

if (searchTimer != 0) {
      clearTimeout(searchTimer);
    }

this means that you can fire many timeOuts and keep trac of them one by one.

Update:

$(this) in var length = $(this).val().length will refer to the window object not the curent input. You have to capture the input element and then pass it to the doSearch function:

$('input.auto').keyup(function() {
    if (searchTimer != 0) {
          clearTimeout(searchTimer);
        }
            searchTimer = setTimeout(doSearch(this), 250);
  });

replace doSearch by this one (and any use of $(this) in the function by $(input)):

function doSearch(input){
   return function(){
       searchTimer = 0;
       var length = $(input).val().length
       ...
   }
}

edited Apr 11, 2011 at 18:32

answered Apr 9, 2011 at 0:04

manji

48k5 gold badges98 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

tchaymore Over a year ago

Thanks for the help -- although it's still not working. The original code works, but this code (based on your advice) doesn't do anything at all. Any other tips?

manji Over a year ago

$(this) in length = $(this).val().length will refer to the window object not the curent input. You have to capture the input and then pass it to the doSearch function. See my edit & this example in jsFiddle:jsfiddle.net/hK8gP/1

tchaymore Over a year ago

Finally figured it out -- forgot to change "this" to "input" in the doSearch function. Thanks for the help and the intro to jsFiddle!

Collectives™ on Stack Overflow

Problem with settimeout in jQuery with AJAX call

1 Answer 1

Update:

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Update:

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related