0

Here is my sample code. (The reason I need to send synchronous requests is that actually I need to send several requests and each requests depends on the previous request's response. And the reason I need to set callbacks is that I want to show some spinner, so users knows the status of the script.)

var xmlhttp =new XMLHttpRequest();
xmlhttp.onreadystatechange=function() { 
  if (xmlhttp.readyState==2) {
    document.getElementById("p2").style.color = "blue"; //statment 1
  }
  if (xmlhttp.readyState==4) {
    document.getElementById("p2").style.color = "red"; //statment 2
  }
}
xmlhttp.open("GET","ajax_info.txt",false);
xmlhttp.send();
balblabla();  // a time-cost function

Then I have 2 questions. First, when will statement 1 and statement 2 actually get executed? Is it guaranteed to get executed before balblabla()?

Second, Even if statement 1 and statement 2 get executed, seems browser won't actually change the displayed color until blablabla() is finished. Is there a way to make color change got displayed before blablabla() finished? (assuming blablabla() takes a long time)

Thanks!

user3462510
  • 106
  • 7
  • 1
    1) TIAS! 2) No, but you could split blablabla() into multiple functions, using callback from a short timer to transition from one to the next. – ikegami Jun 16 '15 at 00:15
  • Why are you using callbacks at all in a sync request? And why are you using SJAX at all? (that's the reason why your color changes don't work) – Bergi Jun 16 '15 at 02:26
  • I use callbacks because I want to show some spinner, so users knows the status of the script. I need to send synchronous requests because actually I need to send several requests and each requests depends on the previous request's response. – user3462510 Jun 16 '15 at 03:16

1 Answers1

1

  1. If the XHR is synchronous then the callbacks are executed before .send() returns. In other words before blablabla().

  2. Browser DOM updates are asynchronous. Or rather, the redraws are asynchronous (DOM update/reflow can at times be synchronous but it won't draw to screen, just update data structures).

So, even if you insist on not learning how to write asynchronous programs by using synchronous XMLHttpRequest you can't draw anything synchronously. You'd be better off writing everything asynchronous.

note: To be clear, redraw only happens when the javascript interpreter have nothing else to run. In other words, the browser window will only be updated after blablabla() completes running.

If blablabla() takes a long time to execute, you can break up the loop using setTimeout() to make it asynchronous. Alternatively you can try using webworkers.

slebetman
  • 109,858
  • 19
  • 140
  • 171
  • The reason I need to send synchronous requests is that actually I need to send several requests and each requests depends on the previous request's response. And the reason I need to set callbacks is that I want to show some spinner, so users knows the status of the script. – user3462510 Jun 16 '15 at 03:17
  • @user3462510: See this: http://stackoverflow.com/questions/4631774/coordinating-parallel-execution-in-node-js/4631909#4631909 and this: http://stackoverflow.com/questions/13250746/process-chain-of-functions-without-ui-block/13252018#13252018 for examples of how to manage multiple async requests. The second answer can be used to process a series of related requests such as a web crawler. – slebetman Jun 16 '15 at 07:12