Question

我在我的页面中使用倒数计时器，工作正常。我试图为停止按钮创建代码，但逻辑似乎没有工作这是我的代码

$('.Stop').click('click', function() {
  clearTimeout( myTimer);
});

function calltimer() {
  countdown( "countdown", 1, 5 );
}


function countdown( elementName, minutes, seconds ) {
  var element, endTime, hours, mins, msLeft, time,myTimer ;

  function twoDigits( n ) {
      return (n <= 9 ? "0" + n : n);
  }

  function updateTimer() {
      msLeft = endTime - (+new Date);
      if ( msLeft < 1000 ) {
          element.innerHTML = "countdown's over!";
      } else {
          time = new Date( msLeft );
          hours = time.getUTCHours();
          mins = time.getUTCMinutes();
          element.innerHTML = (hours ? hours + ':' + twoDigits( mins ) : mins) + ':' + twoDigits( time.getUTCSeconds() );
          myTimer =setTimeout( updateTimer, time.getUTCMilliseconds() + 500 );
      }
  }

  element = document.getElementById( elementName );
  endTime = (+new Date) + 1000 * (60*minutes + seconds) + 500;
  updateTimer();
}

我尝试了setInterval，这似乎不起作用

$('.Stop').click('click', function() {
    setInterval(updateWCTime, 1000);
});

和此代码

$('.Stop').click('click', function() {
  clearTimeout( updateTimer);
});

需要一些建议，谢谢

Answer 1

这是clearTimeout。

的使用方法

var timeout = setTimeout(function() { console.log("Hi!"); }, 5000);
clearTimeout(timeout);

关于倒数计时器，我认为您应该使用setInterval和clearInterval代替。

Answer 2

myTimer是updateTimer()函数的本地变量。它在单击处理程序范围内未定义。因此，您可以使用全局变量，请参阅下面的runnable示例。

var myTimer;

$('.Stop').click('click', function() {
  clearTimeout(myTimer);
});

function calltimer() {
  countdown( "countdown", 1, 5 );
}

function countdown( elementName, minutes, seconds ) {
  var element, endTime, hours, mins, msLeft, time ;

  function twoDigits( n ) {
      return (n <= 9 ? "0" + n : n);
  }

  function updateTimer() {
      msLeft = endTime - (+new Date);
      if ( msLeft < 1000 ) {
          element.innerHTML = "countdown's over!";
      } else {
          time = new Date( msLeft );
          hours = time.getUTCHours();
          mins = time.getUTCMinutes();
          element.innerHTML = (hours ? hours + ':' + twoDigits( mins ) : mins) + ':' + twoDigits( time.getUTCSeconds() );
          myTimer =setTimeout( updateTimer, time.getUTCMilliseconds() + 500 );
      }
  }

  element = document.getElementById( elementName );
  endTime = (+new Date) + 1000 * (60*minutes + seconds) + 500;
  updateTimer();
}

countdown("counter", 1, 30);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="counter"></p>
<button class="Stop" type="button">Stop</button>

倒数计时器停止工作

2 个答案: