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

问题描述

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


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

}

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

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

This is what happens when I click on the submit button of a registration form.

我想要的执行顺序:

setID(1);
checkField(1);//等待这个完成
setID(2);
checkField(2);
setId(3);
checkField(3);
....
if 语句

setID(1);
checkField(1); //wait for this to finish
setID(2);
checkField(2);
setId(3);
checkField(3);
....
if statement

我得到的执行顺序:

for 循环从 i=1 到 i=14
if 语句
checkField(i) 以随机顺序

for loop going from i=1 to i=14
if statement
checkField(i)s in random order

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

Problem: $('#pass_fail').val() has a default value of 'pass'. However through the loop checkField(i) might change its value to 'fail'. But since in reality the if statement is executed before checkField(i)s, the value of $('#pass_fail') always ends up being 'pass' and the 'do something' always executes.

如何等待 checkField(i) 完成执行，然后再进行下一次循环迭代?提前谢谢你！

How do I wait for checkField(i) to finish executing before moving on to the next iteration of the looP? Thank you in advance!

推荐答案

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

I'm assuming from your description of the issue that checkField() is making some sort of asynchronous Ajax call. If you truly want to serialize the calls to checkField() so the 2nd call is not made until the first has completed, then you need to change the structure and flow of your code in order to do that. The two common ways of doing so are either using a callback that indicates completion of a call to checkField() that triggers the next call to checkField() or the use of promises to accomplish something similar.

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

Here's an example of the callback mechanism:

$("#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() 以在它完成异步操作时调用传递给它的回调.

Then, checkField() would have to be modified to call the callback passed to it when it completes its asynchronous operation.

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

If you're using jQuery to make the ajax operations inside of checkField, it would be fairly easy to use jQuery promises to solve this also.

这篇关于Javascript:等待循环中的函数在下一次迭代之前完成执行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！