[removed] wait for function in loop to finish exec

$(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.

Order of execution I want:

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

Order of execution I get:

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

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.

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

标签： javascript jquery for-loop asynchronous callback

2条回答

甜甜的少女心

2楼-- · 2019-02-18 01:17

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();
});

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

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.

0人赞添加讨论(0) 举报

做自己的国王

3楼-- · 2019-02-18 01:28

Sorry, but in earlier response I didn't see any loop to wait for any other function or any inner loop execution to let it finish before next iteration.

With JQuery 3.3.1

Scenario: for loop with var i will wait for inner other loop to complete before next iteration value of 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>

Hope this would help many one.

0人赞添加讨论(0) 举报

[removed] wait for function in loop to finish exec

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间