Question

我试图制作小倒数计时器。当用户单击按钮时，计时器开始并将isTiming设置为true，然后当用户再次单击该按钮时，计时器停止并将isTiming设置为false。问题是当我单击按钮停止计时器时，timeInterval未被清除。我记录了timeInterval，发现它是undefined。我哪里出错了？

$("#time-count").click(function() {
  if (!isTiming) {
    isTiming = true;

    $( "#minus" ).fadeOut();
    $( "#plus" ).fadeOut();
    $( "div#inner" ).css("animation", "loader" + " " + String(60 * Number($("#time-count").text())) + "s ease-out");
    $(this).text($(this).text() + ":" + "00")

    //set the timeInterval
    var timeInterval = setInterval(function() {
      var t = formatTimeRemaining($("#time-count").text());  

      if (t.sec.length === 1) {
        $("#time-count").text(t.min + ":" + "0" + t.sec);
      }else {
        $("#time-count").text(t.min + ":" + t.sec);
      }
      if (t.total <= 0) {
          clearInterval(timeInterval);
      }
    }, 1000)

  }else {
    isTiming = false;

    //Try to clearInterval here but fail
    clearInterval(timeInterval);
    $("#time-count").text("20");
    $( "#minus" ).fadeIn();
    $( "#plus" ).fadeIn();
  }
});

您可以在CodePen上查看我的code

Answer 1

timeinterval仅在语句的if-then部分定义，而不是在else部分定义。将var放在函数的开头，只分配setInterval中现在的值。

Answer 2

您的timeInterval必须是全局的，否则每次点击都会有一个局部变量。

Answer 3

如果限制变量范围

，则将您的时间间隔声明为您的时间间隔

如何在if else语句中clearInterval？

3 个答案: