Подождите, пока пользователь перестанет печатать

Question

У меня есть пользователи, делающие вызов ajax во время набора. Проблема заключается в том, что она делает вызов для каждой буквы набираясь, поэтому я таймаут так:

$(input).live('keyup', function(e){ 

setTimeout(function(){ 

var xx = $(input).val(); 
doSearch(xx); 

}, 400); 

}); 

Это ждать 400мс, но затем выполняет для каждого KeyUp. Как я могу изменить это, чтобы сделать вызов ajax только «один раз» около 400 мс после последней введенной буквы?

(я использовал «задержку» в прошлом, но это не работает на все с моим сценарием ...)

Answer 1

timer = 0; 
function mySearch(){ 
    var xx = $(input).val(); 
    doSearch(xx); 
} 
$(input).live('keyup', function(e){ 
    if (timer) { 
     clearTimeout(timer); 
    } 
    timer = setTimeout(mySearch, 400); 
}); 

это лучше, чтобы переместить функцию к имени функции и назвать его несколько раз, потому в противном случае вы создаете другую функцию лямбда на каждом KeyUp, которая является ненужной и относительно дорогой

Answer 2

Вам нужно сбросить таймер каждый раз, когда новый ключ нажимается, например,

(function() { 
    var timer = null; 

    $(input).live('keyup', function(e) { 
     timer = setTimeout(..., 400); 
    }); 

    $(input).live('keydown', function(e) { 
     clearTimeout(timer); 
    }); 
)(); 

Выражение функция используется для того, чтобы сфера охвата timer переменной ограничивается этими двумя функциями, которые в этом нуждаются.

Answer 3

Я думаю, что вы могли бы использовать delay() в этом контексте, пока вы в порядке с добавлением нового временного «чего-то» в микс. Будет ли это работать для вас?

$(input).live('keyup', function(e) { 
    if (!$(input).hasClass("outRunningAJob")) { 
     var xx = $(input).val(); 
     $(input).addClass("outRunningAJob"); 
     doSearch(xx); 
     $(input).delay(400).queue(function() { 
      $(this).removeClass("outRunningAJob"); 
      $(this).dequeue(); 
     }); 
    } 
}); 

Answer 4

я нашел следующее проще реализовать:

$(input).on('keyup', function() { 
    delay(function() { 
     if (input).val() !== '' && $(input).val() !== $(input).attr('searchString')) { 
      // make the AJAX call at this time 
      // Store the value sent so we can compare when JSON returns 
      $(input).attr('searchString', $(input).val()); 

      namepicker2_Search_Prep(input); 
     } 
    }, 500); 
}); 

Сохраняя текущую строку, которую вы можете увидеть, что пользователь перестал печатать. Затем вы можете безопасно называть свою функцию, чтобы делать то, что нужно для обработки.