Returning from nested functions

Question

function outer() {
    $(['hi', 'there']).each(function(idx, e) {
        console.log(e);
        return;
    });
    alert("I don't want to be called");
}

function outer() {    
    $.get('http://test.com', function (data) {
        console.log(data)
        return; // I want to terminate the entire outer() function here.
    });
    alert("I don't want to be called");
}

What's the convention of breaking out of nested functions in cases like this? When using for loops, returning inside them terminates the entire function that encloses them. However, since $.each() is an individual function call, returning from it only ends itself, not the outer function. I could simply return twice, once inside and once outside in that case, but I am not sure how I would deal with $.ajax() because it is necessary to terminate the function only when I get a successful response.

Short answer: you can't. It's possible to have a workaround of sorts with the first example, but $.get is asynchronous, and outer will have returned before the inner function is even called. — Alexis King
– Alexis King, Commented May 21, 2014 at 0:11
This is not called nested function. It is callback function. Google it. — zs2020
– zs2020, Commented May 21, 2014 at 0:11
@zsong: It's still a nested function. They're not mutually exclusive terms. — cookie monster
– cookie monster, Commented May 21, 2014 at 0:13

PeterKA · Accepted Answer · 2014-05-21 00:31:07Z

Here is a summary of how it all works.

.each()

return true;  // skips to the next iteration of .each()
return false; // exits the .each() loop

In short there's no way of breaking out of the function containing .each() in a single statement.

$.get()

return [true|false]; // makes no sense at all.

As the return in $.get() does not get executed until the ajax call is complete, it wont serve much purpose. Even when you make a synchronous ajax call, a return statement in the success callback still does not do anything substantive. Think of a return from a function as a value to be assigned to the calling statement.

What's making it necessary to break out of your functions?

Michael Geary · Accepted Answer · 2014-05-21 00:31:52Z

For $.each(), you can stop the iteration with return false; in the callback, as described in the jQuery documentation.

This won't return from the calling function, but you can set a flag and test it in the outer function.

If you want an easy way to return from the outer function from inside the loop, you're better off with a simple for loop:

var array = [ 'hi', 'there' ];
for( var i = 0;  i < array.length;  ++i ) {
    var e = array[i];
    console.log(e);
    return;
}
alert("I don't want to be called");

For $.get(), you should add some console.log() calls to your code and observe the order in which they are called:

function outer() {
    console.log( 'in outer before $.get is called' );
    $.get('http://test.com', function (data) {
        console.log( 'inside $.get callback' );
    });
    console.log( 'in outer after $.get returns' );
}

Now what you'll notice is the order of the log messages:

in outer before $.get is called
in outer after $.get returns
inside $.get callback

See how the callback is the last thing? It's called after the outer function finishes. Therefore, there is nothing this callback can do to prevent the rest of outer from executing.

So you need to think some more about what you need to do and figure out a different way to accomplish it.

Hi Michael. Thanks! I checked the document and it seems it's impossible to break out of the outer function because return false simply terminates $.each() function.
Yeah, I misread what you were asking, sorry! You should just use a simple for loop instead of $.each() to make it easy to do this; I updated the answer with that...

Kent Anderson · Accepted Answer · 2014-05-21 00:24:38Z

0

If you use $.ajax() instead of the short hand $.get(), it is possible to specify that it be executed synchronously.

$.ajax({
  url: 'http://test.com',
  success: function (data) {
  },
  async: false
});

Typically, when you want to make a decision based on the return value of a function you have it return a value and then use a conditional statement to determine what happens next.

answered May 21, 2014 at 0:24

Kent Anderson

4863 silver badges16 bronze badges

1 Comment

Michael Geary Over a year ago

async: false has some very undesirable consequences. In some browsers, if your server is slow or fails to respond, it will lock up not only the current browser tab/window but all browser windows. It is recommended only as a very last resort - it's much better to write correct asynchronous code.

Collectives™ on Stack Overflow

Returning from nested functions

3 Answers 3

Comments

2 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

1 Comment

Related