jQuery - 重置倒数计时器答案

【问题标题】：jQuery - resetting a countdown timerjQuery - 重置倒数计时器
【发布时间】：2020-01-01 01:09:24
【问题描述】：

我正在尝试创建一个倒数计时器，每次按下<button> 时都会重置。我正在尝试在我的 timer(); 函数之前使用 clearTimeout 来重置倒计时，但它似乎也打破了计时器（在 9 时停止）。

$(document).ready(function() {

  countdown = null;

  function timer() {
    var seconds = 10,
      el = $(".seconds");
    el.text(seconds);
    countdown = window.setTimeout(function() {
      seconds--;
      el.text(seconds);
      if (seconds > 0) {
        setTimeout(countdown, 1000);
      }
    }, 1000);
  }
  $("button").click(function() {
    clearTimeout(countdown);
    timer();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Start</button>
<button>Continue</button>
<div class="seconds"></div>

【问题讨论】：

setTimeout(timer, 1000); setTimeout 需要调用一个函数，而不是一个数字。
这能回答你的问题吗？ How to use setTimeout(), JavaScript
给你的按钮 id 并分开它

标签： jquery

【解决方案1】：

1.使用setInterval代替setTimeout。

2. 在几秒之前取 if - 所以它不会变成负数。

3.我为您的按钮添加了类，这样就不会混淆点击了哪个按钮。

4.我还为您添加了一点启动/停止用户体验。

$(document).ready(function() {

  countdown = null;

  function timer(input) {
    var seconds,
    el = $(".seconds");
    if (input == "Start"){
      seconds = 10;
      el.text(seconds);
      $(".start").text("Stop");
      countdown = window.setInterval(function() {
        if (seconds > 0) {
          seconds--;
          el.text(seconds);
        }
      }, 1000);
    }
    else {
      $(".start").text("Start");
      el.text(seconds);
    }
  }
  $(".start").click(function() {
    clearInterval(countdown);
    timer($(this).text());
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="start">Start</button>
<button class="continue">Continue</button>
<div class="seconds"></div>

【讨论】：

我真的很喜欢这个，它比我的回答更合乎逻辑，但是如果用户开始多次点击按钮或会遇到问题，可能需要在按钮点击时添加 clearInterval 调用。
@TravisActon 感谢您的评论。我添加了 clearInterval 并添加了一些用户体验。更改按钮文本以停止和停止倒计时:)

【解决方案2】：

除了异端猴子的观点外，您还会遇到范围问题。快速重构以在 doc ready 调用之外提取一些变量/函数会产生：

var seconds;
var countdown;

$(document).ready(function() {
  $("button").click(function() {
    clearTimeout(countdown);
    seconds = 10;
    timer();
  });
});

function timer() {
    $(".seconds").text(seconds);
    seconds--;
    if(seconds > 0) {
    	countdown = window.setTimeout(timer,1000);
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Start</button>
<button>Continue</button>
<div class="seconds"></div>

【讨论】：