Javascript：setInterval'Resumes'而不是'Reset'按钮点击

Posted 2023-04-14

【中文标题】Javascript：setInterval\'Resumes\'而不是\'Reset\'按钮点击

【英文标题】：Javascript: setInterval 'Resumes' instead of 'Reset' on button clickJavascript：setInterval'Resumes'而不是'Reset'按钮点击

【发布时间】：2016-05-04 04:24:58

【问题描述】：

我在使用 setInterval 函数重置经过时间时遇到问题。当按下开始并通过单击按钮停止它时，计时器运行良好。但是当我再次单击开始按钮时，计时器会恢复而不是重置。根据我的研究，clearInterval 会重置它但不起作用。

这是我的代码示例。 https://jsfiddle.net/4165y1x4/16/

HTML

<button id="get_data">Fetch Data</button>
<button id="stop1">Stop</button>
<span id="run-time"></span>
<br>

Javascript

var start = new Date().getTime(),elapsed = '0.0';

var s , url,i=0, time;
$("#get_data").click(function() 
  s = setInterval(function() 
    $("#run-time").html(tym());

  , 100);

);

$('#stop1').click(function() 
  clearInterval(s);
  time = null;
);


function tym() 
  $("#run-time").html('');
  time = new Date().getTime() - start;
  var min = (time / 1000 / 60) << 0;
  var sec = (time / 1000) % 60;

  if (sec < 10) 
    sec = '0' + sec;
  

  return elapsed = 'Elapsed Time: ' + min + ':' + sec + ' (min:sec.mil).'

我希望有人可以提供帮助。最好的问候！

【问题讨论】：

new Date().getTime() 将返回当前时间的time-stamp，只要您恢复间隔..

【参考方案1】：

是的，Rayon 评论正确，你必须重新开始时间。JsFiddle

var start,
    elapsed = '0.0';

var s , url,i=0, time;
$("#get_data").click(function() 
   start = new Date().getTime();
  s = setInterval(function() 
    $("#run-time").html(tym());

  , 100);
  // getData();

);

$('#stop1').click(function() 
  clearInterval(s);
  time = null;
);


function tym() 
  $("#run-time").html('');
  time = new Date().getTime() - start;
  var min = (time / 1000 / 60) << 0;
  var sec = (time / 1000) % 60;

  if (sec < 10) 
    sec = '0' + sec;
  

  return elapsed = 'Elapsed Time: ' + min + ':' + sec + ' (min:sec.mil).'