时间戳

首页 > 解决方案 > 用户如何用按钮打破 JS 循环

javascript - 用户如何用按钮打破 JS 循环

问题描述

用户如何通过单击按钮来停止循环

这是我在循环中需要做的事情：

HTML：

<input type="button" id="stop" value="Stop" />
<input type="button" id="go" value="Go" />
<div id="div"> </div>

Javascript：

document.getElementById('go').addEventListener('click', function(){
    // request to server that return a list of object.

  // for each returned objet, I do another request to the server. like that
  for(let i=0; i < objets.length; i++){
    // request to the server.
    // update the div for progress bar like 1%..2%
  }

});

document.getElementById('stop').addEventListener('click', function(){
    // how to break the loop made by go button
});

标签： javascriptecmascript-6

解决方案

如果您正在运行一个简单的for (..)循环，则无法通过外部影响来停止。一切都发生在 Javascript 的同一个线程上，除非您的代码在某个时刻“结束”并将控制权返回给浏览器一段时间，否则不会发生 UI 交互。拥有“循环”的最简单方法是通过 a setTimeoutor setInterval：

interval = null;

startBTN.onclick = function () {
    var i = 0;
    interval = setInterval(function () {
        console.log(i++);  // this is inside your loop
    }, 1);
};

stopBTN.onclick = function () {
    clearInterval(interval);
};

推荐阅读