Javascript:WAITING循环中的函数在下一次迭代之前完成执行

Question

$(function() {
$("#submit").click(function() {


for (var i=1; i<=14; i++)
{
        setID(i); 
        checkField(i);

}

if ($('#pass_fail').val() != "fail")
{ 
//do something
}

这是当我点击注册表单的提交按钮时发生的情况。

我想要的执行顺序:

设置ID(1)；
检查字段(1)；//等待这个完成
设置ID(2);
检查字段(2)；
setId(3);
检查字段(3)；
....
if语句

我得到的执行顺序:

for 循环从 i=1 到 i=14
如果语句
checkField(i)s 随机顺序

问题:$('#pass_fail').val() 的默认值为“pass”。但是，通过循环 checkField(i) 可能会将其值更改为“失败”。但由于实际上 if 语句在 checkField(i)s 之前执行，$('#pass_fail') 的值总是以“pass”结束，而“do something”总是执行。

如何等待 checkField(i) 完成执行，然后再继续循环的下一次迭代？提前致谢!

Answer 1

根据您对问题的描述，我假设 checkField() 正在进行某种异步 Ajax 调用。如果您真的想序列化对 checkField() 的调用，以便在第一次调用完成后才进行第二次调用，那么您需要更改代码的结构和流程才能做到这一点。这样做的两种常见方法是使用指示完成对 checkField() 的调用的回调，触发下一次对 checkField() 的调用，或者使用 promise 完成类似的事情。

这里是回调机制的例子:

$("#submit").click(function() {
    var i = 0;
    function next() {
        i++;
        if (i <= 14) {
            setID(i);
            checkField(i, next);
        } else {
            // all checkField operations are done now
            if ($('#pass_fail').val() != "fail") { 
                //do something
            }
        }
    }
    next();
});

然后，必须修改 checkField() 以在完成异步操作时调用传递给它的回调。

---

如果您使用 jQuery 在 checkField 中进行 ajax 操作，那么使用 jQuery promises 也可以很容易地解决这个问题。