При нажатии клавиши, когда останов через X секунд вызывает функцию

Question

У меня есть текстовый ввод и текстовая область, и я передаю значение от ввода текстовой области.Я пытаюсь сделать, когда вы набираете что-то на входе и останавливаете, через 2 секунды показывать значения текстовой области.

В этом примере текстовая область получает значение ввода мгновенно:

http://jsfiddle.net/DXMG6/

Итак, я хочу, , когда вы печатаете и останавливаете, через 2 секунды задайте значение.

Как мне этого добиться?Я пытался использовать setTimeout, но когда проходят 2 секунды, он мгновенно получает значение.Так что в основном это работает в течение первых 2 секунд.

Answer 1

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

jQuery(function($){

   function changeFn(){
      alert('Changed');
   } 


   var timer;

   $("#string").bind("keyup", function(){
      clearTimeout(timer);
      timer = setTimeout(changeFn, 2000)
   });

});

Answer 2

Как только я сделал этот плагин под названием bindDelay для jQuery:

$.fn.bindDelay = function( eventType, eventData, handler, timer ) {
    if ( $.isFunction(eventData) ) {
        timer = handler;
        handler = eventData;
    }
    timer = (typeof timer === "number") ? timer : 300;
    var timeouts;
    $(this).bind(eventType, function(event) {
        var that = this;
        clearTimeout(timeouts);
        timeouts = setTimeout(function() {
            handler.call(that, event);
        }, timer);
    });
};

Используется как обычный bind метод, но последний аргумент - это задержка перед запуском обработчика (в милсекундах):

 $("input").bindDelay('keyup', function() {
     $("textarea").text( $(this).val() );
 }, 2000);

См. Скрипку: http://jsfiddle.net/c82Ye/2/

И вы отвязываетесь и запускаете его как обычно:

$("input").unbind("keyup");
$("input").trigger("keyup");

Answer 3

setTimeout возвращает идентификатор «задания». что вам нужно сделать, это очиститьTimeout (id) каждого типа и снова установить setTimeout:

var tID = null;
onclick() {
    if (tID !== null) clearTimeout(tID);
    tID = setTimeout(function() { /*Do domething*/ }, 2000);
}

Answer 4

Вам нужно установить тайм-аут, а сохранить полученный идентификатор тайм-аута .Затем вам нужно проверить, был ли сохранен идентификатор тайм-аута при каждом нажатии клавиши.Если время ожидания установлено, сбросьте время ожидания и сбросьте его.Примерно так:

var timeoutId = null;
var myFunc = function() {
    timeoutId = null;
    // Do stuff
};
var myEventHandler = function() {
    if (timeoutId) {
        window.clearTimeout(timeoutId);
    }
    timeoutId = window.setTimeout(myFunc, 2000);
};

... или проверьте обновленную скрипку:

http://jsfiddle.net/DXMG6/5/

Answer 5

Вам просто нужно изменить свой код следующим образом:

var timeoutId = 0;
$("#string").on("keyup keypress paste mouseup", function () { 
    var a = $('#string').val();
    // Cancel existing timeout, if applicable
    if (timeoutId > 0) {
        window.clearTimeout(timeoutId);
    }
    // Start a timeout for 2 seconds- this will be cancelled above
    // if user continues typing
    timeoutId = window.setTimeout(function () {
        $('#rdonly').html(a);
    }, 2000);
});

Answer 6

Попробуйте что-нибудь подобное. Используйте setTimeout, но при каждом нажатии клавиши сбрасывайте таймер и начинайте сначала ...

http://jsfiddle.net/DXMG6/10/

var textTimer=null;

$("#string").on("keyup keypress paste mouseup", function () { 
    if (textTimer) clearTimeout(textTimer);
    textTimer = setTimeout(function(){
        var a = $('#string').val();
        $('#rdonly').html(a);
    }, 2000);

});
$('.btn').click(function() {
    $('#rdonly').text('');
    $('#string').val('');
});

Answer 7

Я обновил вашу скрипку

Это обновит значение текстовой области через 2 секунды после того, как вы закончите редактирование текста.

Соответствующая часть такова: мы продолжаемссылка на тайм-аут, когда происходит событие keyup, мы сбрасываем предыдущий тайм-аут и запускаем новый тайм-аут, который сработает через 2 секунды.

var timeout = null;
$("#string").on("keyup keypress paste mouseup", function () {
    clearTimeout(timeout);
    timeout = setTimeout(function() {
        // ... your code here
    }, 2000);
});