0

I have a small doubt on Execution cycle of function in jquery. I'm trying to do some stuff with js, And in my script I have one custom function that calls on click of a button. What happens is, when I call the function it will make some ajax call and assigns the result to a variable. According to my knowledge after the execution of the function next statement should execute. But here what happens is after function call before completing the function execution next statements are executing.

Structure of my script is :

var variable=false;
function myfunction(e){
.....
.....
$.ajax({});
.....
console.log('inside : '+variable);
}
$('#button').click(function(){
....
....
myfunction(n);
console.log('called : '+variable);
....
$.ajax({});
....
....
});

Console output:

Ajax call from the function;
called : false
Ajax call from called function;
inside : true

Can anyone explain this stuff....

James
  • 2,874
  • 4
  • 30
  • 55

3 Answers3

2

it will heppen indeed like this just beacause your custom function is an Ajax Call not a normal code.

Ajax stands for Asynchronous Javascript and XML

So, the request processing occur smultanelously that is what for ajax is used.

that is the reason, why even before compelting your function execution , the next statements are being executed. ( asynchronously)

Hope this helps..

Note: What ever the code you put in the Call back function of the ajax , they will be executed only after ajax call is completed

Sai Avinash
  • 4,683
  • 17
  • 58
  • 96
  • How can I make else part of the calling function to execute after the ajax completion. – James Jan 17 '14 at 06:49
  • @james ..sorry i was not able to understand what you are asking,.What do you mean by else part? – Sai Avinash Jan 17 '14 at 06:52
  • Thank you for your answer. my issue has solved from jingyinggong's answer. I just had to make `async:false`. – James Jan 17 '14 at 06:54
  • @James..If you do want to wait for console , then you need to put async:false..but this violates the need for ajax which means execution in parallel.. – Sai Avinash Jan 17 '14 at 06:56
  • may be you're right. But as our need we can use it, for that reason only they have provided `async:false` option. – James Jan 17 '14 at 07:05
1

this is the power of js callbacks!

the js callbacks will do things after, and callbacks will run when get response! But js will not wait for the callbacks excution to continue, the following functions will run! Async is the beauty of js.

so in your js file, you make a ajax call for something. while ajax's running, the console will not wait until ajax complete!

if you want to excute the ajax function sync, you may make a config in the params {async: false}, then the console will wait until the ajax func complete then excute!

James
  • 2,874
  • 4
  • 30
  • 55
jingyinggong
  • 636
  • 5
  • 9
0

The call to .ajax:

  • Assigns an event handler to run a function when a response to an HTTP request is received
  • Sends the HTTP request

The next line of code runs immediately for the same reason that a line of code immediately after $('foo').click(...); runs before the function you pass to click.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • just curious when op is clicking the `button` why `console.log()` is not executed first? – Jai Jan 17 '14 at 06:43