javascript - 重置setTimeout对象(如果存在)

当有人从一长串复选框中单击我的复选框时，我想在一个小的弹出元素中显示所选复选框的数量。我的问题是，小弹出元素应该在最后一次单击之后5秒钟消失，这对于单击一个复选框是可以的，但是如果我快速选中5个框，则计时器仍设置在第一个框上，导致弹出元素消失得太快。

如您在函数中所见，我尝试使用clearTimeout(timeoutName)函数，但在应用该函数时遇到了一些麻烦。控制台日志指出clearTimeout(timeoutName)是未定义的，我可以理解:setTimeout甚至还没有开始。

在清除计时器之前，如何检查计时器是否存在？还是这真的不是最好的方法？选中复选框(运行此功能)时，可能正在运行计时器，但有时可能没有运行。

$('.name_boxes').live('click', function() {
    var checked_count = $('.name_boxes:checked').length;
    // other stuff

    clearTimeout(hide_checked_count_timer); // if exists????????

    $(".checked_count").hide();
    $(".checked_count").text(checked_count+" names selected");
    $(".checked_count").show();

    hide_checked_count_timer = setTimeout(function() {
        $(".checked_count").hide();
    },5000);
});

非常感谢您的任何帮助...

最佳答案

只需在点击处理程序外部声明timer变量:

var hide_checked_count_timer;
$('.name_boxes').live('click', function() {
    var checked_count = $('.name_boxes:checked').length;
    // other stuff

    clearTimeout(hide_checked_count_timer); // if exists????????

    $(".checked_count").hide();
    $(".checked_count").text(checked_count+" names selected");
    $(".checked_count").show();

    hide_checked_count_timer = setTimeout(function() {
        $(".checked_count").hide();
    },5000);
});

http://jsfiddle.net/kkhRE/

考虑到.live已被弃用，您应该使用 .on 委托(delegate)该事件:

// Bind to an ancestor. Here I'm using document because it an
// ancestor of everything, but a more specific ancestor
// would be preferred.
$(document).on('click', '.name_boxes', function() {
    // ...
});

关于javascript - 重置setTimeout对象(如果存在)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/9388036/