使用开始和停止按钮在 javascript 中开始和停止循环

Question

我有一个开始按钮，单击它会运行一个循环函数。我如何获得 stopBTN.onClick 来停止运行循环？

startBTN.onClick = function(){ runLoop(); }

function runLoop(){
    while(condition true){
        getFolderContentsLoop();
    }
}

function getFolderContentsLoop(){
    //loop through folders & files looking for .txt file and if "finished"
      delete files and folders
}

Answer 1

Javascript 是单线程的，只要它处于循环中，它就无法控制其他代码来停止它。但是如果你有一种特殊的 loop 是用 setTimeout:

实现的

function loopStep() {
    ...
}

function loop() {
     loopStep();
     setTimeout(loop, 0);
}

然后你可以添加一个标志来停止循环的执行:

var flag = true;
function loop() {
    if (!flag) return;
    loopStep();
    setTimeout(loop, 0);
}

然后你可以定义你的停止函数：

function stop() {
    flag = false;
}

Answer 2

如果您是运行一个简单的 for (..) 循环，则无法通过外部影响停止此循环。一切都在 Javascript 中的同一个线程上发生，除非您的代码 "ends" 在某些时候和 returns 对浏览器的控制有一段时间不会发生 UI 交互。获得 "loop" 的最简单方法是通过 setTimeout 或 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);
};

Answer 3

我唯一能想到的方法就是一开始就创建一个boolean，将stopBTN.onclick设置为一个切换变量的函数。然后放置一个 if 条件，如果布尔值被切换，则使用 break。

var r = false;
startBTN.onClick = function(){ runLoop(); }
stopBTN.onClick = function(){r = true; }

function runLoop(){
    while(condition true){
        getFolderContentsLoop();
        if(r){
            break;
        }
    }
}

function getFolderContentsLoop(){
    /*loop through folders & files looking for .txt file and if "finished"
      delete files and folders*/
}

它很粗糙，但应该可以。

Answer 4

我通常通过将自己的布尔测试作为 while 条件来解决这个问题，如下所示：

var keepLooping = false;

while(!keepLooping){
    document.getElementById("loopButton").onclick = function(){
        keepLooping = true;
    }
}
while(keepLooping){
    //do something here
    document.getElementById("loopButton").onclick = function(){
        keepLooping = false;
    }
}

使用开始和停止按钮在 javascript 中开始和停止循环

Start and stop loop in javascript with start and stop button

javascript

user-interface