сдерживающие действия между нажатием клавиши в jQuery
Как я могу задержать действия между нажатием клавиши в jQuery. Например;
У меня есть что-то вроде этого
if($(this).val().length > 1){
$.post("stuff.php", {nStr: "" + $(this).val() + ""}, function(data){
if(data.length > 0) {
$('#suggestions').show();
$('#autoSuggestionsList').html(data);
}else{
$('#suggestions').hide();
}
});
}
Я хочу предотвратить данные регистрации если пользователь, непрерывно вводящий. Таким образом, как я могу дать задержку.5 секунд?
4 ответа
Для этого вы можете использовать возможности jQuery для работы с данными, примерно так:
$('#mySearch').keyup(function() {
clearTimeout($.data(this, 'timer'));
var wait = setTimeout(search, 500);
$(this).data('timer', wait);
});
function search() {
$.post("stuff.php", {nStr: "" + $('#mySearch').val() + ""}, function(data){
if(data.length > 0) {
$('#suggestions').show();
$('#autoSuggestionsList').html(data);
}else{
$('#suggestions').hide();
}
});
}
Основным преимуществом здесь является отсутствие глобальных переменных повсюду, и вы можете обернуть это анонимной функцией в setTimeout, если хотите, просто пытаясь сделать пример как можно более чистым.
Для этого есть хороший плагин. jQuery Throttle / Debounce
Я бы обернул это в функцию, например, так:
var needsDelay = false;
function getSuggestions(var search)
{
if(!needsDelay)
{
needsDelay = true;
setTimeout("needsDelay = false", 500);
if($(this).val().length > 1){
$.post("stuff.php", {nStr: "" + search + ""}, function(data){
if(data.length > 0) {
$('#suggestions').show();
$('#autoSuggestionsList').html(data);
}else{
$('#suggestions').hide();
}
});
}
}
}
Таким образом, сколько бы раз вы ни пинговали, поиск не будет происходить чаще, чем каждые 500 миллисекунд.
Все, что вам нужно сделать, это заключить вашу функцию в тайм-аут, который сбрасывается, когда пользователь нажимает клавишу:
var ref;
var myfunc = function(){
ref = null;
//your code goes here
};
var wrapper = function(){
window.clearTimeout(ref);
ref = window.setTimeout(myfunc, 500);
}
Затем просто вызовите «оболочку» в ключевом событии.