倒数计时器未倒计时 1 秒 - Jquery/Javascript

Question

我刚进入 Javascript 3 周，刚进入 Jquery 2 天。我的倒计时有问题...

我希望它在我单击 'play' 时从 30 秒开始倒计时，（元素 ID #play）。

当我点击播放时，倒数计时器出现在正确的元素 ID #countdown 中，在 29 秒处。

但是，它被冻结了，只是没有倒计时 1 秒。我不确定我做错了什么！

任何帮助都会很棒。

我附上了基本的 html 模板代码。还有我写的JS。

function init() {


  console.log('hello');

  const $play = $('#play');
  const $countdown = $('#countdown');

  let timeRemaining = 30;
  let timerOn = false;
  let timerId = null; //null is the same as false

  function countDownLogic() {

    if (timeRemaining > 0) {
      --timeRemaining;
      $countdown.html(timeRemaining);
      timerId = setInterval(1000);
      console.log('start timer');

      // IF COUNTDOWN HITS ZERO 
      if (timeRemaining === 0) {
        //$play.classList.remove('hide');
        console.log('time ends');
      } else {
        console.log('false');
      }
    } else {
      timerOn = false;
      clearInterval(timerId);
    }

    $play.html('PLAY AGAIN!');
  }

  $play.on('click', () => {
    if (!timerOn) {
      timerOn = true;
      countDownLogic();
      // timerId = setInterval(countDownLogic(), 1000);
    }
  });

}
$(init);

<header>Header</header>


<!-- PLAY BUTTON -->
<div><button id="play">Play</button></div>

<main>


  <section class="desktop section1">
    <div>Drop Movies Here</div>

    <div class="bottom">Take Guess Here</div>
  </section>

  <section class="section2">

    <!-- Form -->
    <div class="box" id='countdown'>
      <p></p>
    </div>


    <div class="box">
      <p>DIV 2</p>
    </div>

    <div class="box">
      <p>DIV 3</p>
    </div>

    <div class="box">
      <p>DIV 4</p>
    </div>

    <div class="box">
      <p>DIV 5</p>
    </div>

    <!-- BOX 3 -->
    <!-- <div class="box-2">
            <p>DIV 3</p>
          </div> -->

  </section>
</main>

Answer 1

您需要在 setInterval 的调用中指定一个函数。而且你不应该在重复的函数内部调用它，你应该在外面调用它来启动计数器。

setInterval 的参数应该是 countDownLogic，而不是 countDownLogic()。这会立即调用该函数，而不是将对该函数的引用传递给 setInterval.

function init() {


  console.log('hello');

  const $play = $('#play');
  const $countdown = $('#countdown');

  let timeRemaining = 30;
  let timerOn = false;
  let timerId = null; //null is the same as false

  function countDownLogic() {

    if (timeRemaining > 0) {
      --timeRemaining;
      $countdown.html(timeRemaining);
      console.log('start timer');

      // IF COUNTDOWN HITS ZERO 
      if (timeRemaining === 0) {
        //$play.classList.remove('hide');
        console.log('time ends');
      } else {
        console.log('false');
      }
    } else {
      timerOn = false;
      clearInterval(timerId);
    }

    $play.html('PLAY AGAIN!');
  }

  $play.on('click', () => {
    if (!timerOn) {
      timerOn = true;
      timerId = setInterval(countDownLogic, 1000);
    }
  });

}
$(init);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>Header</header>


<!-- PLAY BUTTON -->
<div><button id="play">Play</button></div>

<main>


  <section class="desktop section1">
    <div>Drop Movies Here</div>

    <div class="bottom">Take Guess Here</div>
  </section>

  <section class="section2">

    <!-- Form -->
    <div class="box" id='countdown'>
      <p></p>
    </div>


    <div class="box">
      <p>DIV 2</p>
    </div>

    <div class="box">
      <p>DIV 3</p>
    </div>

    <div class="box">
      <p>DIV 4</p>
    </div>

    <div class="box">
      <p>DIV 5</p>
    </div>

    <!-- BOX 3 -->
    <!-- <div class="box-2">
            <p>DIV 3</p>
          </div> -->

  </section>
</main>

倒数计时器未倒计时 1 秒 - Jquery/Javascript

Countdown timer not counting down in by 1 second - Jquery/Javascript

jquery

timer

countdown