Question

我对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，但它并没有阻止脚本在之后运行。

Answer 1

jQuery具有one函数来仅为第一个事件注册处理程序。

替换：

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

使用：

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

这个功能就像所有其他功能一样，但似乎只有少数人知道它的存在。

提示

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

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

最好是：

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

Docs：

对于id选择器，jQuery使用JavaScript函数document.getElementById（），这非常有效。当另一个选择器附加到id选择器时，例如h2＃pageTitle，jQuery在将元素标识为匹配之前执行额外的检查。

Answer 2

尝试致电：

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

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

Answer 3

只需使用标志

即可解决此问题

var started = false;

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

    started = true;

    // start timer to count down
});

当用户开始在jQuery中填写表单时启动计时器

3 个答案: