隐藏模态后如何停止计数器？

Question

我只想在显示模态时计数。但不知何故，在模态关闭后，计数器仍在上升。我下面的代码有什么问题？

$(document).ready(function() {
  $('#mymodal').on('shown.bs.modal', function() {
    var seconds = 0;
    $('#mymodal #show_seconds').val(seconds);

    if ($(this).is(':visible') {
      setInterval(function() {
        ++seconds;
        $('#mymodal #show_seconds').val(seconds);
      }, 1000);
    } else {
      $('#mymodal #show_seconds').val('');
    }
  });
});

Answer 1

JavaScript 函数不会自动为你销毁。您必须手动清除间隔。

$(document).ready(function() {

  var interval;

  $('#mymodal').on('shown.bs.modal', function() {
    var seconds = 0;
    $('#mymodal #show_seconds').val(seconds);

    if ($(this).is(':visible') {
      interval = setInterval(function() {
        ++seconds;
        $('#mymodal #show_seconds').val(seconds);
      }, 1000);
    } else {
      $('#mymodal #show_seconds').val('');
    }
  });

  $('#mymodal').on('hidden.bs.modal', function () {

    if( interval ) {

      clearInterval( interval );

    }

  };

});

Answer 2

您需要知道如何在 Javascript 中使用 "setInterval"。

var mySetInterval = setInterval(function(){},1000);//create a valuable;
clearInterval(myVar);// delete a valuable;

请参阅https://www.w3schools.com/jsref/met_win_clearinterval.asp

隐藏模态后如何停止计数器？

how to stop counter after hide modal?

javascript

jquery

counter

modal-dialog

timer