1

我已经搜索和搜索了，但我对这个人一无所知。帮助！我正在使用 JQuery on() 观看 keyup 事件的输入字段 (#filter_query)。当用户在此输入字段中输入一些文本时，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() 如何，我的搜索功能都会被触发多次。谢谢！

4

2 回答 2

0

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

我相信您应该能够通过不声明变量来解决它var iTimeoutID。

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

于 2012-04-03T21:12:00.530 回答
0

YouriTimeoutID是.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()事件处理程序服务于多个对象并且每个对象都需要跟踪它自己的状态，那么第二个选项非常适合。

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

于 2012-04-03T21:12:04.773 回答