在按键时,在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

有一次我做了这个插件调用bindDelayjQuery:

$.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方法一样使用,但最后一个参数是触发处理程序之前的延迟(以mil为单位):

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

见小提琴:http://jsfiddle.net/c82Ye/2/

然后解除绑定并像正常情况一样触发它:

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