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

如果您正在运行简单的for (..)循环，则无法通过外部影响停止此操作。一切都发生在Javascript中的同一个线程上，除非你的代码＆＃34;结束＆＃34;在某些时候，将控制权返回给浏览器一段时间没有UI交互可能发生。拥有＆＃34;循环的最简单方法＆＃34;是通过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 2

Javascript是单线程的，只要它处于循环中，它就无法控制其他代码来阻止它。但是，如果您使用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 3

我通常通过将自己的布尔测试作为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;
    }
}

Answer 4

我能想到的唯一方法是在开始时创建一个布尔值，并将stopBTN.onclick设置为切换变量的函数。然后在切换布尔值的情况下设置使用break的if条件。

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*/
}

这很粗糙，但应该有用。

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

4 个答案: