如何停止setInterval并恢复？

Question

如何停止setInterval然后从同一个地方恢复？

例：

start ---> 1,2,3,4,5 .... ---> stop ---> start ---> 6,7,8 ...

的index.html

<div onclick=start()>start</div>  
<div onclick=stop()>stop</div>

index.js

let refreshInterval = null;

start() {
  var i = 0;
    refreshInterval = setInterval(function() {
      console.log(i);
      i++;
    }, 1000);
}


stop() {
    ???????
}

Answer 1

您需要一个全局变量i并用于停止clearInterval 。

 function start() { if (refreshInterval !== undefined) return; // prevent more than one interval refreshInterval = setInterval(function() { console.log(i); i++; }, 1000); } function stop() { clearInterval(refreshInterval); refreshInterval = undefined; } var refreshInterval, i = 0; 

 <div onclick="start()">start</div> <div onclick="stop()">stop</div> 

Answer 2

您可以将count变量保留在外部作用域中，这样每次运行start函数时都不会重置

 let refreshInterval = null; let count = 0 function start() { refreshInterval = setInterval(function() { document.getElementById('value').innerText = count count++; }, 1000); document.getElementById('start').disabled=true } function stop() { clearInterval(refreshInterval) document.getElementById('start').disabled=false } 

 #counter{ padding: 0.25rem; font-size: 1.25rem; border: 1px solid black; margin-bottom: 1rem; } 

 <div id='counter'><span>counter:</span> <span id='value'/>0</div> <button onclick=start() id='start'>start</button> <button onclick=stop() id='stop'>stop</button>