清除超时&设置超时函数

Question

作为这个问题的后续，我'我想知道为什么这不起作用

$("#textarea").keydown(function(){
oldValue = $("#textarea").val();
});
$("#textarea").keyup(function(){
var startTimer = null;
if(startTimer) clearTimeout(startTimer);
startTimer = setTimeout(function(){
var newValue = $("#textarea").val();
// get something out of the comparison
alert(something) // alert the comparison
  oldValue = newValue;

},2000);

所需的行为是仅当用户 2 秒内未键入任何内容时才收到警报消息。它适用于比较部分，但是，当我继续输入时，它不会停止警报消息。相反，我收到的警报数量与按下的按键数量相同。 我尝试了创建和删除 cookie 的一个版本，效果很好。在这个特殊案例中，有什么问题吗？

Answer 1

每次调用 keyup 处理程序时，您都会获得一个新的 startTimer（并将其初始化为 null）。尝试在外部范围内声明它：

(function() {
    var startTimer = null;
    var oldValue; // Declare this too, so it isn't global

    $("#textarea").keydown(function(){
        oldValue = $("#textarea").val();
    });
    $("#textarea").keyup(function(){
        if(startTimer) {
            clearTimeout(startTimer);
        }
        startTimer = setTimeout(function(){
            var newValue = $("#textarea").val();
            // get something out of the comparison
            alert(something) // alert the comparison
            oldValue = newValue;
        },2000);
    });
})();

Answer 2

我认为你真正想要的是考虑使用节流或去抖风格的函数。这里有一个人编写了一个可以使用或不使用 jQuery 的程序，并且可以完全满足您的要求。我会尝试一下。

http://benalman.com/projects/jquery-throttle-debounce-plugin /

节流
使用 jQuerythrottle/debounce，您可以将延迟和函数传递给 $.throttle 以获得一个新函数，当重复调用时，每次延迟执行原始函数不超过一次（在相同的上下文中并传递所有参数）毫秒。

限制对于限制处理程序在调整大小和滚动等事件上的执行速度特别有用。只需看一下以下使用示例或工作节流示例即可亲自了解！

还可以看到他使用的精彩工作流程图像。我不会热链接，但值得阅读这篇文章，看看已有哪些库，这样您就可以节省一些时间。