Question

每次文本框值发生变化时，我都需要调用一个函数。但是，它初始化了一个AJAX调用，因此我不需要在每次击键时运行脚本。

我写了以下函数作为概念证明：

$(document).ready(function() {
    var scheduledChange;
    function triggerLinkChange(value, debounce) {
        clearTimeout(scheduledChange);
        scheduledChange = setTimeout(function(val) {
            alert("value: "+val);
        }(value), debounce);
    }
    $('input').keyup(function(){
        triggerLinkChange($(this).val(),3000);
    });
});

不幸的是，延迟似乎无法正常工作。我不确定究竟是什么问题，因为第一次通话似乎有一点延迟（可能），但随后每次按键都会触发。

有什么想法吗？

Answer 1

您正在调用您在超时中声明的函数，而不是将其传递给函数。

但是，它实际上可以在没有绑定或将value传递给函数的情况下工作，因为该变量无论如何都在范围内：

    scheduledChange = setTimeout(function() {
        alert("value: " + value);
    }, debounce);

以下是一个例子：http://jsfiddle.net/RbLRu/

Answer 2

看起来太复杂了？

$('input').keyup(function(){
    var self = this;

    clearTimeout( $(this).data('timer') );

    $(this).data('timer', setTimeout(function(){
        // do ajax, 3 seconds seems like lot here

        $.get('url', {value : self.value}, callback);

    }, 3000));

});

Answer 3

更简单的方法是使用这样的变量（伪代码，因为我只是在这里输入）：

    var myTrigger; 

    $('input').keyup(function(){
            // Cancel the countdown to do the ajax
            window.clearTimeout(myTrigger);
            // Now reset it to trigger in 3 seconds unless another key is pressed
            myTrigger = window.setTimeout(function () { DoAjax(); }, 3000);
         }
    });

去抖/限制函数的奇怪行为

3 个答案: