Javascript：等待循环中的函数在下一次迭代之前完成执行

2023年5月22日 200次阅读 
$(function() {
$("#submit").click(function() {


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

}

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

当我点击注册表单的提交按钮时会发生这种情况.

我想要的执行顺序：

SETID(1);
校验场(1); //等待这个结束
SETID(2);
校验场(2);
SETID(3);
校验场(3);
….
如果声明

我得到的执行顺序：

for循环从i = 1到i = 14
如果声明
checkField(i)以随机顺序排列

问题：$(‘#pass_fail’).val()的默认值为’pass’.但是通过循环checkField(i)可能会将其值更改为“fail”.但实际上if语句在checkField(i)之前执行,$(‘#pass_fail’)的值总是最终成为’pass’而’do something’总是执行.

在继续下一次looP迭代之前,我如何等待checkField(i)完成执行？先感谢您！

最佳答案 我假设你对问题的描述是checkField()正在进行某种异步Ajax调用.如果你真的想要序列化对checkField()的调用,那么在第一次调用完成之前不会进行第二次调用,那么你需要更改代码的结构和流程才能做到这一点.这样做的两种常见方法是使用一个回调来指示完成对checkField()的调用,该调用触发对checkField()的下一次调用,或者使用promises来完成类似的操作.

这是回调机制的一个例子：

$("#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来解决这个问题也相当容易.

点赞