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

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 使用 native document.getElemenyById功能:

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

最好是:

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

Docs :

For id selectors, jQuery uses the JavaScript function document.getElementById(), which is extremely efficient. When another selector is attached to the id selector, such as h2#pageTitle, jQuery performs an additional check before identifying the element as a match.