Javascript-JQuery on（）clearTimeout作用域问题

我找了又找，这一次我是空的，伙计们。帮助我正在观看使用JQuery on对keyup事件进行的输入字段筛选查询。当用户在此输入字段中输入一些文本时，on会触发一个setTimeout，然后依次触发站点的搜索功能。如果用户继续在输入字段中键入clearTimeout，我试图避免触发搜索。由于某些原因，没有为clearTimeout保留超时ID，并且每次都会生成一个新ID

这是我的密码：

$(document).on('keyup', '#filter_query', function (event) {
    var iTimeoutID,
        iTypingDelay = 800,
        sFilterVal = $.trim($('#filter_query').val()),
        sFilterCat = $('#filter_catagory').val(),
        sFilterCol = $('#filter_col').val();

    clearTimeout(iTimeoutID);

    if (sFilterVal !== "") {
        iTimeoutID = setTimeout(
                    function () {
                        searchFunction();
                    },
                    iTypingDelay
                    );
    }
});

---

在上面的代码中，无论clearTimeout是什么，我的搜索功能都会被触发好几次。谢谢大家!

因为您正在定义变量var iTimeoutID，这意味着它不是全局变量，只能在该函数内部访问。因此，当函数再次被调用时，它会创建一个新变量

我相信您应该能够通过不声明变量var iTimeoutID来修复它

我可能错了，如果是这样，请有人纠正我。

您的iTimeoutID是.on事件处理程序函数的局部变量，因此每次该函数完成并下次重新创建时，它都会被销毁。将其从该范围移动到更高的级别或全局级别，以便它能够从一个事件存活到下一个事件

你可以这样做

var iTimeoutID = null;
$(document).on('keyup', '#filter_query', function (event) {
    var iTypingDelay = 800,
        sFilterVal = $.trim($('#filter_query').val()),
        sFilterCat = $('#filter_catagory').val(),
        sFilterCol = $('#filter_col').val();

    if (iTimeoutID) {
        clearTimeout(iTimeoutID);
        iTimeoutID = null;
    }

    if (sFilterVal !== "") {
        iTimeoutID = setTimeout(function() {
            iTimeoutID = null;
            searchFunction();
        }, iTypingDelay);
    }
});

如果要避免使用全局变量，或者有多个全局变量，可以使用jQuery的.data将计时器id存储在对象上，如下所示：

$(document).on('keyup', '#filter_query', function (event) {
    var self = $(this);
    var iTimeoutID = self.data("timerID") || null;
    var iTypingDelay = 800,
        sFilterVal = $.trim($('#filter_query').val()),
        sFilterCat = $('#filter_catagory').val(),
        sFilterCol = $('#filter_col').val();

    if (iTimeoutID) {
        clearTimeout(iTimeoutID);
        iTimeoutID = null;
    }

    if (sFilterVal !== "") {
        iTimeoutID = setTimeout(function() {
            self.data("timerID", null);
            searchFunction();
        }, iTypingDelay);
    }
    self.data("timerID", iTimeoutID);
});

下面是另一个版本，它使用自执行函数作为一些变量的外壳，这些变量可以在事件处理程序中持续，而不会是全局变量：

(function() () {
    var iTimeoutID = null;
    $(document).on('keyup', '#filter_query', function (event) {
        var iTypingDelay = 800,
            sFilterVal = $.trim($('#filter_query').val()),
            sFilterCat = $('#filter_catagory').val(),
            sFilterCol = $('#filter_col').val();

        if (iTimeoutID) {
            clearTimeout(iTimeoutID);
            iTimeoutID = null;
        }

        if (sFilterVal !== "") {
            iTimeoutID = setTimeout(function() {
                iTimeoutID = null;
                searchFunction();
            }, iTypingDelay);
        }
    });
})();

如果这是一个快速的过程，并且与其他代码冲突的可能性很小，并且事件处理程序只提供一个对象，那么第一个选项是非常好的

如果.on事件处理程序服务于多个对象，并且每个对象都需要跟踪其自身的状态，那么第二个选项非常适合

---

如果同一事件处理程序上没有多个对象，那么第三个选项是避免添加任何新全局变量的最简单方法。

谢谢，但我一直认为不鼓励使用这样的全局变量。我错了吗？如果是这样的话，声明全局变量的最佳实践是什么？又增加了一个选项-一个自动执行的匿名函数，它充当将在整个事件处理程序中持续的非全局变量的外壳。