Question

我有一个使用jquery的应用程序，它遍历一系列复选框。

在迭代过程中，我有一个显示打印会话状态的对话框。我还有一个取消按钮来取消会话。

<input type="button" id="cancelButton" onclick="cancel()">

    function cancel() {
        stop = true;
    }

通过每次迭代，我检查stop是否为真，如果是，我就跳出循环。但问题是，如果我在会话期间按下取消按钮，取消功能将仅在.each循环之后运行（达到目的）。有没有办法让按钮更具响应性或更好的方法来解决这个问题？

Answer 1

在单独的线程中运行函数？

setTimeout(function() { $('[name=check]:checked').each(function() {
    printingFunction();
}); }, 1);

Answer 2

您可以链接setTimeout以便检查停止。您仍然需要等待当前操作完成，但它会让您摆脱循环。

function next()
{
    printingFunction();
    if (!stop && someOtherCheck)
        setTimeout(function() { next(); }, 1);
}

next();

Answer 3

我认为你不能打断.each循环，因为 JavaScript执行是单线程的。

但我认为计时器是异步执行的，您可以尝试使用以下内容取消和清除。

下面的逻辑可能会让你在那里。

var timeouts = [];

$.each(someArray, function(index, value){
    timeouts.push(setTimeout(function(){
          console.log(index);
     },5000*index));
});


$('#cancel-button').click(function(){
    $.each(timeouts, function (_, id) {
       clearTimeout(id);
    });

    timeouts = [];
}):

，如果上述情况无效，您可以考虑使用.index()。

Answer 4

再试一次 - 我对转换语句进行了更改，以清除IE 11中的错误：

var ele = Array.prototype.shift.call($checked);

你需要在每个循环调用上使用setTimeout（可以设置为0），这样取消函数就有机会执行 - 就像这样：

function cancel() {
    stop = true;
}
function printingFunction() {
    var x = 0;
    while (x < 10000){
        x+=1;
    }
}

function printLoop($checked) {
    if (stop) {
        console.log('Stopped - button pushed')
    } else {
        if ($checked.length > 0) {
            var ele = Array.prototype.shift.call($checked);
            printingFunction()
        }
        if ($checked.length > 0) {
            setTimeout(function(){printLoop($checked)}, 0);
        } else {
            console.log('Stopped - array depleted')
        }

    }

}

var stop = false,
        $checked = $('[name=check]:checked');

printLoop($checked)

循环后按钮响应

4 个答案: