jQuery function not executing before another one

Question

Both of the functions are $.getJSON() functions, and even though my first function is placed before the other one, it sometimes occurs after the second one. Note that I mentioned "sometimes". When I keep refreshing the page, I get different results, and it's like it's randomly being chosen which function is called first. Here is the snippet of code:

timeClusters = [];
$.getJSON('java_output/tasksTab.json', function (data) {
  console.log ("first");
  // Method stuff here, not important
});

$( document ).ready(function() { 
  console.log("second");
  // Method stuff here, not important
});

Now, when I run the program and look at the console, sometimes I get

first
second

but other times I get

second
first

It is essential that I get the first one first, and second second, because the second method processes data that is produced and altered in the first method.

Let me know if you need more information

That's how Javascript works. $.getJSON will call your callback when it's done, as ready() will fire when it's ready. It's called non-blocking. — jeremyharris
– jeremyharris, Commented Aug 6, 2014 at 23:21
@jeremyharris So what can I do to ensure that the "second" function ALWAYS executes after the first one has? — StoneMan
– StoneMan, Commented Aug 6, 2014 at 23:22
@user3ffgfgfgfgfg50064 The answers given for "Can I get a jQuery Deferred on document.ready()?" would probably do well for that. — Jonathan Lonowski
– Jonathan Lonowski, Commented Aug 6, 2014 at 23:25
Can't you just create a function instead of having the document ready, and call this once the first method has finished? Or am I missing the point? — Radderz
– Radderz, Commented Aug 6, 2014 at 23:28
@JonathanLonowski - I believe document.ready executes the callback if the DOM is ready, even at a later time, so you could just stick a document.ready handler inside the callback for the ajax request to make sure the DOM is ready, but thats ugly, and putting the ajax call inside document.ready sure looks better, even if it can be a little slower. — adeneo
– adeneo, Commented Aug 6, 2014 at 23:40

Ende Neu · Accepted Answer · 2014-08-06 23:44:10Z

1

The getJSON method is Asynchronous, that means that once started it will eventually hold a result, the function wrapped in document ready instead fires as soon as the DOM is ready, instead of doing this sequence of action you should move the code form the ready function to the getJSON callback:

$(document).ready(function() {
  $.getJSON('java_output/tasksTab.json', function (data) {
    console.log ("first");
  }).done(function() {
    console.log( "second" );
  })
})

As adeneo pointed out you don't actually need to chain the done method, you can simply add the computation in the default callback:

$(document).ready(function() {
  $.getJSON('java_output/tasksTab.json', function (data) {
    console.log ("first");
    console.log( "second" );
  })
})

Other kinds of callback you can use are fail and always.

edited Aug 6, 2014 at 23:44

answered Aug 6, 2014 at 23:22

Ende Neu

15.8k5 gold badges61 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

15 Comments

StoneMan Over a year ago

Thanks man, works well. Coming from a JAVA background, I'm very unfamiliar with the asynchronous behavior and functionality these kind of functions. Do you know any good resources for understanding them and the nature of callback functions?

adeneo Over a year ago

Both those callbacks are the same, I don't get it ? Also, moving the code from the ready function to the callback for the ajax call does not guarantee that the DOM is ready ?

Ende Neu Over a year ago

I like this documentation for async functions.

Ende Neu Over a year ago

@adeneo No moving the code inside the callback doesn't guarantee that the DOM is ready, most likely it will work only because the HTTP request will be slower than the DOM loading, if that's a problem OP can wrap the whole getJSON inside a document ready. For the callbacks, they are called in different way, if the HTTP request doesn't return an OK status code, fail will be called, else done and always is always called.

adeneo Over a year ago

And then you're back to the same code the OP has, except you've moved both console logs into the same callback, which would obviously print the logs to the console in the right order, but doesn't really solve anything. And now you've added document.ready, and it's the same as the other answers, and one wonders what people where upvoting ?

|

Collectives™ on Stack Overflow

jQuery function not executing before another one

1 Answer 1

15 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

15 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related