Executing code after jquery call back

Question

Lets say I have the following js code

$(function() {
   $('#some_id').load('myfile.html', function() {
      alert('Call back called');
   });

  alert('You should alert second');
  // more javascript code .........

});

For some reason, alert('Call back called'); is the last thing that gets alerted to me. I thought that js code executes in the order of the file. Is there a way to make alert('Call back called'); go first before all my other functions.

Looking at my simple code snippet one would suggest why not put alert('You should alert second'); in the function call back, unfortunately I am inheriting a code base that is really big and jamming all those function calls in my callback wont be feasible

Welcome to the wonderful world of **async**! You can't do that. — SLaks, Aug 27 '13 at 14:58
`alert('You should alert second');` is called immediately when the js is initialized, where the alert('Call back called') will be called only after the .load is called (look into callbacks). — matth, Aug 27 '13 at 14:59
the callback function of the load() function is thought exactly for this purpose, you should put the code there, there aren't reasons to don't do that. — Fez Vrasta, Aug 27 '13 at 15:00
You could use `.ajax()` instead of `.load()` and set `async: false` like explained here: http://stackoverflow.com/questions/133310/how-can-i-get-jquery-to-perform-a-synchronous-rather-than-asynchronous-ajax-re#133327 — Ron van der Heijden, Aug 27 '13 at 15:03
When you create a function, do you expect it's contents to execute before you call the function http://pastebin.com/1zSt0vH2? that's kinda what you're expecting out of the above code which obviously won't work. — Kevin B, Aug 27 '13 at 15:04

score 2 · Accepted Answer · answered Aug 27 '13 at 14:58

2

.load() is an asynchronous method, and the anonymous function you passed to it as a parameter is executed ONLY when the asynchronous method finishes executing.

answered Aug 27 '13 at 14:58

Brad M

7,857
1
23
40

score 1 · Answer 2 · answered Aug 27 '13 at 15:04

1

"I thought that js code executes in the order of the file." It does, and that's what's happening here. But because the .load() callback function is, well, a callback (i.e. only fires once the asynchronous operations is complete) alert('Call back called'); will only fire when it's invoke at some point in the future.

answered Aug 27 '13 at 15:04

Mark Erasmus

2,305
6
25
37

Here's a basic demo of the concept you're explaining http://pastebin.com/1zSt0vH2 – Kevin B Aug 27 '13 at 15:07

score 1 · Answer 3 · answered Aug 27 '13 at 15:07

1

As pointed by others, load is an async method, hence you need to use something like a synchronous AJAX call. Use it this way:

$.ajax({
     url:    'myfile.html',
     async:   false
     success: function(result) {
                  alert('Call back called');
              }
});

alert('You should alert second');

answered Aug 27 '13 at 15:07

Sunny R Gupta

5,026
1
31
40

1

I agree. If you downvote something please leave a comment. This seems like a good way to replace the asynchronic method, worth a try. – supertopi Aug 27 '13 at 15:12
I guess the down vote because it did not work. I tried but had no luck with your solution. – tawheed Aug 27 '13 at 17:57

score 1 · Answer 4 · 2013-08-29T08:00:11.907

You could use the Deferred Object which deals with asynchronous calls for you. Doing so your code will be executed in the reading order, no matter when the response is sent back :

$(function() {
    var jqxhr = $.get('myfile.html', function(data) {
        $('#some_id').html(data);
        alert('Call back called');
    });
    jqxhr.done(function() { 
        alert('You will alert second');
    });
});

frhd · Answer 5 · 2013-08-27T16:58:00.743

1

Using pure javascript, just add a function with a callback argument for the stuff coming in the second alert() area:

$(function() {

   function someCode (callback) {
     $('#some_id').load('myfile.html', function() {
       alert('Call back called');
       // add parameters, if you like
       callback();
     });
   }

   function someMoreCode() {
     alert('You should alert second');
     // more javascript code .........
   }

   // And Finally...
   someCode(someMoreCode);

});

edited Aug 27 '13 at 16:58

answered Aug 27 '13 at 15:49

frhd

9,396
5
24
41

Nice, but you should call `callback` inside `load`'s callback. Moreover, you don't have to wrap the `load` call inside a function, just declare `callback` somewhere and use it. – Aug 27 '13 at 16:00
1. Why? 2. Example? It would be helpful if you explained your points beyond stating what should be done and what not. I actually liked your solution, but wanted to give one which works without jQuery. So why vote down? – frhd Aug 27 '13 at 16:41
1

Your code produces exactly the same result than his code. That's it. – Aug 27 '13 at 16:47

score 0 · Answer 6 · answered Aug 27 '13 at 15:00

If you want alert('You should alert second'); to happen second you need to call it from within your callback function:

$(function() {
   $('#some_id').load('myfile.html', function() {
      alert('Call back called');
      alert('You should alert second');
   });

});

Executing code after jquery call back

6 Answers6