Проблема с settimeout в jQuery с вызовом AJAX - PullRequest
Новая
       7

Проблема с settimeout в jQuery с вызовом AJAX

0 голосов
/ 09 апреля 2011

Я использую вызов jQuery AJAX для динамического отображения результатов поиска, когда пользователь вводит указанный набор полей ввода.Этот код работает нормально и идентичен функции doSearch , описанной ниже, за исключением того, что он напрямую связан с событием keyup «input.auto».Но я пытаюсь улучшить его, добавив задержку по времени - в противном случае вызов срабатывает для каждого события keyup, и некоторые вызовы перекрываются, что приводит к очень запутанным результатам.

После этого вопроса Я придумал этот код: 

$(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'});
            }
        });
     }
});
});

Возможно, здесь есть очень простая вещь, которую мне не хватает, и она демонстрирует мои смутные знания jquery и javascript, но я был бы признателен за любые указатели.(Также, если бы кто-то мог объяснить, что «searchtimer» делает в этом синтаксисе, это было бы также здорово.)

1 Ответ

1 голос
/ 09 апреля 2011

первый аргумент setTimeout является указателем на функцию, но вы передаете результат вызова doSearch, измените его на: 

setTimeout(doSearch, 250);

и в doSearch удалитеlength arg, так как он переопределяется локальным length var: 

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

searchTimer - это id для установленного вами тайм-аута.Он используется для очистки позже: 

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

это означает, что вы можете запускать много тайм-аутов и отслеживать их один за другим.

Обновление:

$(this)в var length = $(this).val().length будет ссылаться на window object, а не на текущее input.Вы должны захватить input element и затем передать его doSearch function: 

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

заменить doSearch на этот (и любое использование $(this) в функции на $(input)): 

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