在Javascript中使用按钮退出for循环

Question

嘿，当用户按下停止按钮退出循环时，我一直很难让我的代码识别。我知道这是一个线程问题，但我一直在尝试使用 setTimeout/setInterval 解决这个问题。

在我的代码中，我有一个带有onclick="stop()" 的按钮，其功能为stop(){cancel = true;}。在我的代码中，我有一个 .each 循环，它遍历某些行一定次数（取决于选中的复选框的数量）。每次迭代都会调用Row(this);，除了一些检查和getter 之外，它还包含一个for 循环，用于迭代当前行的总长度。就像这样：

for (i = 0; i < row.length; i++) {      
    ajaxCallForRowSingle(row[i]);

    if (stop == true) {
        return false; }
}  

我已经尝试过setTimeout(ajaxCallForRowSingle(row[i]),0);，但我得到“找不到语法错误标签”，我认为这是来自 ajax 调用。有解决办法吗？我的按钮按下总是排队并在循环后执行。

Answer 1

好的，这就是你需要做的......

不要使用“for”循环，而是创建一个函数并使用“setTimeout”或“setInterval”递归调用它

var iRowsToProcess = row.length;
var iRowIndex = 0;
var processRows = function(){
    if (!stop){
        ajaxCallForRowSingle(row[iRowIndex]);
        iRowIndex++;
        if (iRowIndex < iRowsToProcess){
            setTimeout(processRows, 1);
        };
    };
};

setTimeout(processRows, 1);

此代码将递归调用“processRows”，直到处理完所有行，或者直到“stop”为 false。美妙之处在于，每个“setTimeout”调用都是异步处理的，这意味着它允许其他 JS 代码在再次调用之前更新。它释放所有 JS 代码同步等待的一个线程。

Answer 2

我认为您正在寻找一个调用自身而不是 for 循环的递归函数。另外，要中断 for 循环，我会使用“break”而不是尝试返回 false。

设置一个递归函数以继续调用自身，直到您找到所需的 row.length。

Answer 3

如果您想使用 setTimeout 或 setInterval，则必须将 ajaxCall 包装在另一个函数中，例如，

setInterval(function () {
    ajaxCallForRowSingle(row[i]);
}, 0);

您可以通过将其ID存储为变量来清除间隔，然后调用clearInterval，例如，

var i = 0;
var id = setInterval(function () {
    ajaxCallForRowSingle(row[i]);
    i++;
    if (i >= row.length) { clearInterval(id); }
}, 0);

var stop = function () {
    clearInterval(id);
}