Question

当有人点击我的复选框时，从一长串复选框中，我想在一个小弹出元素中显示所选复选框的数量。我的问题是，小的弹出元素应该在最后点击后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);
});

感激不尽的任何帮助......

Answer 1

只需在click处理程序之外声明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代理该活动：

// 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() {
    // ...
});

Answer 2

您可以使用短路运营商的力量

hide_checked_count_timer && clearTimeout(hide_checked_count_timer);

只有当左侧变量未定义时，右侧语句才会运行。

Answer 3

问。控制台日志声明clearTimeout（timeoutName）是未定义的，我可以理解：setTimeout还没有开始。

一个。无论是否有超时要清除，clearTimeout() function的返回值都是undefined。它没有可以测试的“成功”概念。如果存在与您传递的ID相关联的排队超时，则它将被清除，否则不会发生任何事情。

问。在清除之前如何检查计时器是否存在？

你不能，至少不是因为你可以查询一些未完成的超时注册表。如您所知，.setTimeout() function返回刚刚排队的超时的id，您可以在运行之前使用该ID清除它，但无法测试它是否已经运行。 id只是一个数字，因此即使在超时运行或已清除之后，您保存的变量也将继续保持该数字。

使用已经运行的超时的id调用clearTimeout()完全没有坏处 - 基本上如果该id的超时在队列中，它将被清除，否则不会发生任何事情。

测试“是否存在尚未运行的未完成超时”的最简单方法是在超时运行时将持有timerid的变量设置为null，即在您排队的函数内：

var timerid = setTimout(function() {
                 timerid = null;
                 // other operations here as needed
              }, 5000);

// in some other code somewhere
if (timerid != null) {
   // timer hasn't run yet
} else {
   // timer has run
}

保存timerid的变量需要位于可以在设置它的位置和测试位置访问的范围内，即不要将它声明为事件处理程序中的局部变量。

Answer 4

检查是否存在使用;

if (typeof timerid == 'undefined')
{
    //timer has not been set so create it
    timerid = setTimeout(function(){ var something = true;}, 5000);
}

如果存在，则重置setTimeout对象

4 个答案: