View Full Version : top down execution

Paul Williams
01-22-2012, 12:27 AM
it is my understanding that all lines of code are executed in a "top down" order. (exception: temporary exit/return on functions), even then, when return from function, top down continues on its way.

simple enough.
so why is this set of instructions jumping forward several lines of code and jumping back to continue execution?

202. var statusIndex=0;
203. $('#cpqcSelect').click( function() {
204. alert('line 204: statusIndex ='+statusIndex);
205. $(this).css({'background-color':'#f00','border':'3px solid #000','color':'#000'});
206. alert('line 206');
207. $.get('getRangeStatus-server-script.php', {data:0}, processResponse );
208. alert('line 208');
209. function processResponse(data,status){
210. if (status == 'success') { statusIndex = data }
211. else { statusIndex = 'error' }
212. alert('line 212; value of statusIndex = '+statusIndex);
213. }; // end function processResponse(data,status)
214. alert('line214');
215. return false; // stop the link from reloading the page or traveling elsewhere
216. }); //end $('#cpqcSelect').click( function()

i'm using the alert() boxes to track how this code is being executed.
oddly enough it does not go top down as i think it should.
maybe something is forcing it to jump around? i don't know?
line 204 fires. ok.
line 206 fires. ok.
line 208 fires. ok.
but then execution jumps into line 214, before it goes into the function on line 209. thats odd?
execution goes thru the function and spits out line 212 correctly.
then it jumps to line 215.
why the jump to line 214 before it goes into the function?

i need execution to complete the function at 212 first and then go on.
but it doesn't want to do that.

possible error causing odd jumping around?

would appreciate your eyes, please.

Logic Ali
01-22-2012, 04:14 AM
Defining a function does not cause it to be executed; It has to be called.

Paul Williams
01-22-2012, 05:44 AM
thank you for the response

i do know that.
and the function is called on line 207 in the Jqueary statement.

it is my understanding that as soon as the Jqueary stmt goes out to the server, that it sits there a listens for the return data, and as soon as the server returns the data, all passes to the callback function "processResponse", which is a call to that function listed below.

i tried taking line 214 and stuffing it in just under line 212 and that actually worked. strange but it kept things going in a top down path.

seems odd. very odd.

the reason i'm puzzled up on this, is that i have alot of work to do using the value of statusIndex, once i get that value out of the db.; conditional stmts, changes to the DOM, changes to html...... the usual chores. i just didn't want to list all that stuff.

i did try puting all my chores inside the processResponse function, and that did work alot better, i'm not sure why, maybe a scope issue with variables? i dont know. i even tried global variable, but the machine didn't seem to like that either.

thank you for your comment.

01-22-2012, 06:23 AM
JavaScript does not normally work in a top down fashion. It only does that for statements that are set up to run sequentially. That is always being interrupted by events being triggered that run other portions of code from all over the place and by interrupts set by JavaScript itself (using setTimeout or setInterval calls)

The way your code is set up in the original post the function in line 209 is passed as a parameter into line 207 - that doesn't necessarily mean that it will run straight away or at all as the code that line 207 calls will attach it to an event listener that will only run that function when that event is triggered.

You can rely on the statements within a single function running in top down order but that doesn't mean that there will not be other code run in between those statements and it doesn't mean that functions referenced from the code will necessarily run straight away.

If you need one statement to always run after another then you need to place them in the same function.

Old Pedant
01-22-2012, 08:48 AM
I don't use jQuery, but I would *ASSUME* that the coding $.get(...) is asking for an AJAX call to go out and "get" the contents of that PHP file.

AJAX is an acronym for Asynchronous Javascript And Xml. Even if you aren't using it with XML, though, it is still asynchronous. Sot that $.get() line is simply asking JavaScript to make a GET request of that PHP page and, WHEN AND IF the PHP responds, it then executes that processResponse function. That could be one millisecond later or 10 seconds later or...

But it *never* happens instantaneously (even if you could somehow make the time for an HTTP Request to a distant server followed by the HTTP Response occupy zero time...which you can't).

There *IS* a way you can make this code happen "in sequence", but that requires that you change from using an Asynchronous call to a Synchronous one. I can easily do that with non-jQuery code, but I don't know how you do it with jQuery code. Anyway, with a Synchronous call (let's name it SJAX), JavaScript *will* wait for the response and so the statements would execute in the order you seem to be expecting. But watch out: with a SJAX call, you run the danger that the server takes 30 seconds to respond or perhaps never responds (e.g., transmission error), in which case *ALL* your JavaScript code will simply hang until the response is received.

Logic Ali
01-22-2012, 08:59 AM
thank you for the response

i do know that.
and the function is called on line 207 in the Jqueary statement.
No it isn't - it is referenced as an event handler.