javascript - jQuery 计数器启动/停止/重置未正确停止

Question

我正在尝试使用 setInterval() 构建一个 jQuery 计数器，其想法是一旦按下按钮，计数器就应该开始计数，然后如果按下另一个按钮，应该停止+重置为零，这个过程应该是可重复，但是即使我的变量集显示 false，我的 JS 似乎也不会停止计时器。计时器只应在 true 时才计数。

$('.start').click(function() {
      timer(true)
    })

    $('.stop').click(function() {
      timer(false)
    })

    let timerShouldCount = false

    function timer(timerStatus) {
      timerShouldCount = timerStatus
      if (timerShouldCount == true ) {
        setInterval(function(){
          console.log('counting');
        }, 1000);
      }
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="start" type="button">Start</button>
        <button class="stop" type="button">Stop</button>

更新

$('.js_ask-later').click(function() {
        timer(true)
      })
      $('.js_close-modal').click(function() {
        timer(false)
      })

      let registerTimer
      let timerShouldCount = false

      function timer(timerStatus) {
        timerShouldCount = timerStatus
        if (timerShouldCount == true) {
          $('#login-modal').on('hidden.bs.modal', function (e) {
            registerTimer = setInterval(function(){
              $('#login-modal').modal('show')
            }, 5000)
          })
        } else {
          clearInterval(registerTimer)
        }
      }

Answer 1

您在任何时候都没有清除间隔。为此，您需要对创建的间隔的引用。

let my_int;

function timer(timerStatus) {
    timerShouldCount = timerStatus
    if (timerShouldCount == true ) {
        my_int = setInterval(function(){
            console.log('counting');
        }, 1000);
    } else
        clearInterval(my_int);
}

<小时/>

[编辑]

根据下面的评论，很明显您实际上没有计时器，只是一个间隔。我们需要一个计时器变量。

let my_int, timer = 0;

function timer(timerStatus) {
    timerShouldCount = timerStatus
    if (timerShouldCount == true ) {
        my_int = setInterval(function(){
            timer++; //<-- increment
            console.log('counting');
        }, 1000);
    } else {
        clearInterval(my_int);
        timer = 0; //<-- reset to 0
    }
}

您如何使用该计时器，即在 DOM 中显示它的位置，取决于您，但您现在至少可以看到我们如何递增它并将其重置为 0。