Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>The mechanism for feedback should be different for the duration the user has to wait. Less than 0.1 seconds and a user will not notice. </p> <p>Between 1 and 10 seconds you can simply display a symbol such as an animated gif of some sort that indicates your app is processing. See <a href="http://www.ajaxload.info/" rel="nofollow noreferrer">http://www.ajaxload.info/</a> I use a div with an ID "processing" and style it with a spinner and use the following jquery code to show and hide it before and after the process.</p> <pre><code>function showProcessing(){ $("#processing").fadeIn("fast"); } function hideProcessing(){ $("#processing").fadeOut("fast"); } </code></pre> <p>Beyond 10 seconds it would be ideal to provide an estimate of processing time.</p> <p>See <a href="http://www.useit.com/papers/responsetime.html" rel="nofollow noreferrer">Response Time Overview</a> for the source of these numbers.</p> <p>The following code immediately changes the link colour to red and calls the append method a fraction of a second later. Essentially is allows the browser to execute a separate thread before getting hung up in a loop. The timeout may need to be adjusted depending on the browser. Check out Neil Mix's <a href="http://www.neilmix.com/2007/02/07/threading-in-javascript-17/" rel="nofollow noreferrer">Threading in JavaScript 1.7</a> if you need to relinquish control in a more generic manner.</p> <pre><code> function startAppend(){ for (var i = 0; i &lt; 1500; i++){ appendContent(); } } clickLink.onclick = function(){ clickLink.style.color = "red"; setTimeout('startAppend()', 10) }; </code></pre>
 

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