Javascript breaking a for loop inside a callback function

Question

I have code like the following:

function test(obj) {

    if(//some conditon) {
        obj.onload();
    }else{
        obj.onerror();
    }
}


for(var i=0;i<4;i++){   

    test({
        onload:function(e){          
            //some code to run
        },
        onerror:function(e){
            break;
        }


    });
}

The gist is the test() function is a function to make an XHR request (it is actually an API of the Appcelerator Titanium platform so I have no control over it) and I'm looping something to call the test function. I need to break the loop on the onerror function, but I get an error saying the break is not inside a loop or switch statement. How can I rewrite this?

thanks I only vote answer up in the past but now I know to hit the check mark — eirikrl
– eirikrl, Commented Aug 7, 2012 at 9:33

revelt · Accepted Answer · 2017-10-15 18:05:38Z

If your code sample does represent some actual code (i.e. all the processing is done in the same event loop tick), you may do the following:

function test(obj) {

    if (some_condition) {
        return obj.onload();
    } else {
        return obj.onerror();
    }
}

var result;
for(var i=0; i<4; i++){   

    result = test({
        onload:function(e){          
            //some code to run
            return true;
        },
        onerror:function(e){
            return false;
        }


    });

    if (!result) {
        break;
    }
}

Otherwise, if there is something asynchronous done, you have to call test sequentially, and not in parallel. For example,

function test(obj) {
    doSomeAjaxRequest(arguments, function (err, result) {
        if (some_condition) {
            obj.onload();
        } else {
            obj.onerror();
        }
    });
}

var f = function (i) {
    if (i >= 4) return;
    test({
        onload:function(e){          
            //some code to run
            f(i+1);
        },
        onerror:function(e){
            break;
        }
    });
}

f(0);

just.another.programmer · Accepted Answer · 2012-08-07 09:21:33Z

4

Not possible. A for loop is a synchronous procedure while an Ajax request is not. That means when the onerror callback happens, the for loop is already done executing.

As an alternative you could introduce a check into your onsuccess handler which confirms no errors have happened yet.

var errorOccured = false;
for(var i=0;i<4;i++){   

test({
    onload:function(e){   
        if(errorOccured) return;
        //some code to run
    },
    onerror:function(e){
        errorOccured = true;
    }


});
}

edited Aug 7, 2012 at 9:21

answered Aug 7, 2012 at 9:16

just.another.programmer

8,8438 gold badges55 silver badges93 bronze badges

Comments

Lode Michels · Accepted Answer · 2012-10-23 12:11:21Z

Bit hacky maybe but one could do something like this with a handler function.

var handler = function(array, callback){
    for(var i=0, l=array.length, e=array[i]; i<l; ++i){
        if(true === handler.exit){
            handler.exit = false; //restore
            return;
        }
        callback.call(null, e);
    }
};
handler.exit = false; 

handler([1,2,3], function(e){
   console.log(e);
   if(2 === e){
       arguments.callee.caller.exit = true; // :-)
   }
});

Didn't test this but maybe you could bind function to scope in call even?

var handler = function(a, f){
    this.exit = false;
    for(var i=0, l=a.length, e=a[i]; i<l; ++i){
        if(true === this.exit){
            this.exit = false; //restore
            return;
        }
        callback.call(this, e);
    }
};
handler([1,2,3], function(e){
   console.log(e);
   if(2 === e){
       this.exit = true;
   }
});

Vladimir Kadalashvili · Accepted Answer · 2012-08-07 09:16:17Z

0

You cannot break the loop inside test() function. I think the best solution in this case would be to throw an exception inside test() function, then catch it in the loop and break.

answered Aug 7, 2012 at 9:16

Vladimir Kadalashvili

7472 gold badges5 silver badges17 bronze badges

Comments

Wiebe Tijsma · Accepted Answer · 2012-08-07 09:24:26Z

0

Maybe you can make the 'onload' callback recursive?

Meaning, you just call the 'test' method inside the 'onload' handlerr, this would also mean you fire all requests in order instead of all at the same time.

answered Aug 7, 2012 at 9:24

Wiebe Tijsma

10.3k5 gold badges55 silver badges73 bronze badges

Comments

user3300510 · Accepted Answer · 2017-10-28 22:00:16Z

0

I take the answer of penartur, but I modified without the "break":

function test(obj) {
    doSomeAjaxRequest(arguments, function (err, result) {
        if (some_condition) {
            obj.onload();
        } else {
            obj.onerror();
        }
    });
}

var f = function (i) {
    if (i >= 4) return;
    test({
        onload:function(e){          
            //some code to run
            f(i+1);
        },
        onerror:function(e){
            console.log('stop');
        }
    });
}

f(0);

answered Oct 28, 2017 at 22:00

user3300510

134 bronze badges

Collectives™ on Stack Overflow

Javascript breaking a for loop inside a callback function

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related