Javascript and Jquery mixing, what happens first?

Question

I apologize for asking such a simple question, but googling "javascript or jquery first" just keeps giving me people asking which they should learn first.

Currently I have a couple lines of javascript, followed by a bit of jquery, followed by a bit more javascript. This is the part where it breaks down...

$.get("alliances.php", function(data, status){
    console.log(data);
    searchIndex = data.search(allianceName);
    rawAllianceLink = data.slice(searchIndex-25,searchIndex);
});
console.log(rawAllianceLink);

After I carry this code out, the JQuery goes last and my console.log prints undefined. (Note, the console.log isn't the actual statement, I have more lines that need to go after this, it is just an example that it is performed out of order.) Was wondering if someone could clarify or explain how I can alter when each of these steps is carried out.

jQuery is javascript, it's executed in the order it's written unless it's asynchronous, which `$.get` is as it's ajax. — adeneo, Jul 02 '14 at 03:21
@adeneo: "executed in the order it's written unless it's asynchronous" --- this is actually a tricky (and I'd say it's a bit incorrect) phrase and may confuse a lot of newbies :-) JS is executed in order it's written regardless if it's asynchronous or not. — zerkms, Jul 02 '14 at 03:22
@zerkms - Yes it is, if you understand asynchronicity and that the callback is executed later. If you don't understand asynchronicity it's not really clear that things aren't happening "line by line" when asynchronous methods are involved. — adeneo, Jul 02 '14 at 03:47
@adeneo: it's not only about asynchronicity actually. If one expects `var f = function() { alert(123); };` to output `alert` immediately - they need to refresh their base JS knowledge. — zerkms, Jul 02 '14 at 04:10

score 1 · Accepted Answer · answered Jul 02 '14 at 03:23

1

Simple ans:

Its simply because your $.get(... is an AJAX call. You have to log your data in callback handler.

$.get("alliances.php", function(data, status){
    console.log(data);
    searchIndex = data.search(allianceName);
    rawAllianceLink = data.slice(searchIndex-25,searchIndex);
})
  .done(function() {
    console.log(rawAllianceLink);
  });

answered Jul 02 '14 at 03:23

Deepak Ingole

14,912
10
47
79

What would that look like for this? – turner Jul 02 '14 at 03:25
@turner pardon I didnt understand your comment – Deepak Ingole Jul 02 '14 at 03:26
Is there a way that I could kick it back out of the jquery (in the same vein as a return statement) to use in my other code? – turner Jul 02 '14 at 03:29
NVM, I will read the duplicate post, I clearly don't have a very strong grasp of how AJAX works – turner Jul 02 '14 at 03:30
@turner you cant. simply cause you are requesting for asynchronous behavior calling `$.get`. If you dont want asyc behavior you can use `asyc:false` flag. But I swear its really bad programming. – Deepak Ingole Jul 02 '14 at 03:31
@turner duplicate question is good to get start with AJAX – Deepak Ingole Jul 02 '14 at 03:33

score 1 · Answer 2 · answered Jul 02 '14 at 03:24

Let's get a few things clear here. $.get() is a wrapper for $.ajax() in jQuery. The javascript being applied happens within the jQuery library.

Next, the $.get call is asynchronous meaning that the console.log(rawAllianceLink); likely will fire prior to the $.get() request completing, which takes some time to fetch the file and read the data.

The function(data, status) is applied to the data returned from alliances.php only after the request has fully completed. Within that callback function, it would seem as if you've properly applied the javascript methods that you intend.

If you need to fire further code after the callback execution occurs, then you should place it into a function and execute the function at the end, passing the rawAllianceLink as an argument, like so:

$.get("alliances.php", function(data, status){
    console.log(data);
    searchIndex = data.search(allianceName);
    rawAllianceLink = data.slice(searchIndex-25,searchIndex);
    process_request(rawAllianceLink);
});

function process_request(RAL){
    console.log(RAL);
}

Now things will be fired in the proper order. You could also look into jQuery's $.defered, but that may be another beast, entirely.

This actually helped me a lot, thanks a ton! Got the program working. Ultimately it ended up that everything my program was doing was reliant on this so I might as well have been doing it synchronously. I managed to make the output look like it had finished loading while secretly putting in the links in the background :) — turner, Jul 02 '14 at 04:46

score 0 · Answer 3 · answered Jul 02 '14 at 03:25

What is happening in your code, is that, the jQuery "get" function is called, which sends a request to the server to retrieve some information at "alliances.php", but it just sends the request, it doesn't wait for a response, then it carries on with the console.log. At some later point, the browser gets the response back from the server, and when the browser gets a chance, it executes the code in the callback function. This kind of programming isn't unique to jQuery, it happens with event handler, timeouts, intervals, etc. in javascript, whether you use jQuery or not.

Javascript and Jquery mixing, what happens first?

3 Answers3