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

Question

$(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）完成执行？ 先感谢您！

Answer 1

我假设你对问题的描述是checkField()正在进行某种异步Ajax调用。 如果你真的想要序列化对checkField()的调用，那么在第一次调用完成之前不会进行第二次调用，那么你需要更改代码的结构和流程才能做到这一点。 这样做的两种常用方法是使用任何一个回调，用于指示呼叫完成checkField()触发下一次调用checkField()或使用的承诺来完成类似的东西。

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

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

Answer 2

对不起，但在之前的响应中，我没有看到任何循环等待任何其他函数或任何内部循环执行，让它在下一次迭代之前完成。

使用JQuery 3.3.1

场景： for loop使用var i将等待内部其他循环在i下一个迭代值之前完成

 $(document).ready(function(){ $("p").click(function() { var varIDeferred = $.Deferred(); var varJDeferred = $.Deferred(); /* var loopJInside = function(j) { console.log("j is : " + j); $("span").html($("span").html() + "<br>j is : " + j); varJDeferred.resolve(); j++; console.log("j value after incr is : " + j); return j; } // call inside loopJ setTimeOut(j = loopJInside(j), 500); */ var loopJ = function(valueI) { for (var j = valueI; j < (3+valueI); ) { varJDeferred = $.Deferred(); $("span").html($("span").html() + "<br>j is : " + j); j++; varJDeferred.resolve(); } varIDeferred.resolve(); return (valueI+1); }; for(var i = 0; i < 3; ) { varIDeferred = $.Deferred(); $("span").html($("span").html() + "<br>value of i is : " + i); if (i == 3) break; i = loopJ(i); }; }); });

 <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head> <body> <p style="cursor:default;border:2px solid black;width:60px;padding:5px;">Click me</p> <span><span> </body> </html>

希望这会对很多人有所帮助。

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

问题描述

2 个解决方案

解决方案1
3 已采纳 2014-06-10 01:48:38

解决方案2
0 2018-10-19 20:18:37

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

问题描述

2 个解决方案

解决方案1 3 已采纳 2014-06-10 01:48:38

解决方案2 0 2018-10-19 20:18:37

解决方案1
3 已采纳 2014-06-10 01:48:38

解决方案2
0 2018-10-19 20:18:37