在按鍵上，當X秒後停止時調用函數

Question

我有一個文本輸入和一個textarea，並且將輸入值傳遞給textarea。我正在嘗試這樣做，當你在輸入中輸入一些內容並停止時，在2秒後將值顯示到textarea。

在這個例子中的textarea獲取輸入的值瞬間：

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返回「工作」的ID。你所要做的就是clearTimeout（ID），每一個類型的和setTimeout的再次：

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

Answer 4

我已經updated your fiddle

這你最終編輯文本後，會更新textarea的值2秒。

相關部分是這樣的：我們保留對超時的引用，當觸發keyup事件時，我們清除之前的超時，並且我們開始一個新的超時，它將在2秒內觸發。

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

Answer 5

嘗試類似這樣的東西。使用的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 6

你需要做的是設置超時，並保存生成超時ID 。然後你需要檢查每個按鍵是否保存了超時ID。如果超時已設置，請清除超時並重置。類似這樣：

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 7

你只需要修改如下代碼：

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); 
});