1

我对 jQuery 很陌生，我想做一些我认为不应该那么复杂的事情：我想在用户开始填写表单时启动一个 60 秒的计时器。当定时器达到 0 时，它会触发其他功能。

到目前为止我得到了什么：

$('form').click(function(){
        $(function(){
          var count = 60;
          countdown = setInterval(function(){
            $("p#timer").html(count);
            if (count == 0) {
              $("p#sentence").html("Time's up! You lost.");
              $("form").addClass('lost');
              clearInterval(countdown);
            }
            count--;
          }, 1000);
        });
    });

这段代码有效并且完全符合我的要求。唯一的问题是，当用户单击表单的另一部分（例如，另一个输入）时，它会启动与第一个不同步的第二个计时器并覆盖它。基本上，每次用户单击表单时，都会启动另一个计时器，并且事情会变得很糟糕。

现在，看到这一点，这段代码就可以做到这一点似乎很合乎逻辑。然而，我只是不知道该怎么做才能防止它发生。

我试图给表单一个类并在用户单击后将其删除：

$('form.timer_idle').click(function(){
        $(this).removeClass('timer_idle');
        $(function(){
          var count = 60;
          countdown = setInterval(function(){
            $("p#timer").html(count);
            if (count == 0) {
              $("p#sentence").html("Time's up! You lost.");
              $("form").addClass('lost');
              clearInterval(countdown);
            }
            count--;
          }, 1000);
        });
    });

我希望它会起作用，但它没有。第一次单击后确实删除了 .timer_idle 类，但它并没有阻止脚本在之后运行。

4

3 回答 3

3

jQuery 具有one仅为第一个事件注册处理程序的功能。

代替：

$('form').click(function(){

和：

$('form').one('click',function(){

这个函数和其他函数一样是文档，但似乎只有少数人知道它的存在。

提示：

当您向id-selector提供额外详细信息“帮助” jQuery 选择器引擎时，它会阻止 jQuery 使用本机函数：document.getElemenyById

$("p#sentence").html("Time's up! You lost.");

最好是：

$("#sentence").html("Time's up! You lost.");

文档：

对于 id 选择器，jQuery 使用 JavaScript 函数 document.getElementById()，效率极高。当另一个选择器附加到 id 选择器时，例如 h2#pageTitle，jQuery 在将元素识别为匹配之前执行额外的检查。

于 2012-12-30T21:47:46.727 回答
1

尝试调用：

$('form.timer_idle').unbind('click');

这将删除之前绑定的点击事件。

于 2012-12-30T21:49:48.977 回答
0

这个问题可以简单地通过使用一个标志来解决

var started = false;

$('form').click(function(){
    if(started){
        return;
    }

    started = true;

    // start timer to count down
});

​</p>

于 2012-12-30T22:01:08.263 回答