Question

我已经有3周时间进入Javascript，2天进入Jquery。我的倒数计时器有问题......

当我点击“播放”时，我希望它从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

1 个答案: