Question

我有一个文本输入和一个textarea，我将值从输入传递给textarea。我正在尝试这样做，当你在输入中键入内容并停止时，在2秒后向textarea显示值。

在此示例中，textarea立即获取输入值：

所以我想要，当你输入并停止时，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

我为jQuery创建了一个名为bindDelay的插件：

$.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。你需要做的是再次清除每个类型的setTimeout（id）和setTimeout：

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

Answer 4

您需要做的是设置超时，保存生成的超时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 5

我updated your fiddle

这将在您结束编辑文本2秒后更新textarea值。

相关部分是这样的：我们保留对超时的引用，当keyup事件被触发时，我们清除先前的超时并开始新的超时，将在2秒内触发。

var timeout = null;
$("#string").on("keyup keypress paste mouseup", function () {
    clearTimeout(timeout);
    timeout = setTimeout(function() {
        // ... your code here
    }, 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

您只需按如下方式修改代码：

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

在按键时，在X秒呼叫功能后停止

7 个答案: