Я хочу выполнить функцию, как через 2 секунды после того, как пользователь закончил вводить текст в текстовое поле. Если они продолжают печатать через 1 секунду, время задержки reset возвращается к 2.
Он должен работать с чем-то похожим на поле автозаполнения.
Я знаю два события: change и keyup. Проблема с change заключается в том, что текстовое поле должно потерять фокус для его запуска. для keyup, что, если они используют мышь для вставки текста?
Могу ли я помочь здесь?
Здесь есть событие HTML5 oninput, поддерживаемое всеми текущими основными браузерами и может быть обработано в IE 8 и ниже:
$("#myInput").bind("input", function () {
// ...
})
Очень простой подход к кросс-браузеру будет
$("#myInput").bind("input propertychange", function (evt) {
// If it the propertychange event, make sure it the value that changed.
if (window.event && event.type == "propertychange" && event.propertyName != "value")
return;
// Clear any previously set timer before setting a fresh one
window.clearTimeout($(this).data("timeout"));
$(this).data("timeout", setTimeout(function () {
// Do your thing here
}, 2000));
});
Это приведет к тому, что событие дважды запустится в IE 9 (один для propertychange, один для input), но это не имеет значения из-за характера обработчика событий.
Вы можете связать событие input, а также keyup для резервного копирования в старых браузерах. Затем вы можете запустить таймер, который получает reset каждый раз, когда обнаружено действие пользователя. Сохраняя ручку таймера в данных текущего элемента, убедитесь, что несколько элементов не мешают друг другу.
$('input').bind('input keyup', function(){
var $this = $(this);
var delay = 2000; // 2 seconds delay after last input
clearTimeout($this.data('timer'));
$this.data('timer', setTimeout(function(){
$this.removeData('timer');
// Do your stuff after 2 seconds of last user input
}, delay));
});
Вы можете использовать как изменения, так и keyup:
var globalTimeout;
$(function() {
$("#myInput").change(initTimer).keyup(initTimer);
});
function initTimer() {
if (globalTimeout) clearTimeout(globalTimeout);
globalTimeout = setTimeout(handler, 2000);
}
function handler() {
...
}
keyup будет работать:
$("#s").keyup(function(e){
$("#t").html($(this).val());
});
Jsfiddle: http://jsfiddle.net/3nx6t/
Я бы сделал это вот так:
$("selector").keyup(function(){
if(typeof(window.delayer) != 'undefined')
clearTimeout(window.delayer);
window.delayer = setTimeout(function_you_want_to_get_execute_with_delay, 2000);
});
Приветствия