Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>Synchronous Ajax calls are bad practice! They stop the browser for the entire duration and fool the user into thinking something crashed. You really should change this.</p> <p>To your question why you don't see the latest DOM changes:</p> <p>When you change something in JavaScript the browser will not immediately change the DOM, because painting a ui element is far more expensive than painting a dozen. So modern browsers will try to change the DOM as lazy as possible.</p> <p>There are, apart from performance other upsides, like</p> <pre><code>$('p').hide(); </code></pre> <p>can hide all p elements at the same time although jQuery will select each and than change the css.</p> <p><em>I cant't give you any hind of a workaround without understanding your code better, sorry.</em> Thanks!</p> <p><strong>UPDATE:</strong></p> <p>After reading your code, I would think about adding some closures to the application. A basic concept of javascript is that functions are first class types. I personally think, that your program flow is less than ideal, and this is the area of improvement. the calls to call url should look something like this:</p> <pre><code>var callUrl = function(url, callback, interactionStoped) { if(typeof interactionStoped != 'undefined' &amp;&amp; interactionStoped == true) { //add code to display some loading animation } jQuery.ajax({ type: 'GET', url: url, success: function(data) { callback(data); //remove loading animation here } }); } </code></pre> <p>as a start. Then you refactor your getUrl calls.</p> <ul> <li>Funny thing is in your code example you never use the response, so I don't know what your app is waiting for. Assuming it is something important you must handle the response always in your callback.</li> <li>Try looking at your app as if it were a tree. A Parent Function or Object will call itself some child functions that handle different tasks, wich themselves will invoke other functions. Build methods that are small and do only one thing on a really small set of data / parameters.</li> </ul> <p>I can't rewrite your complete code, but I hope this helps anyway.</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload