Question

I use Ajax load icons all the time for when I do ajax requests.

I want to know if it’s possible to accomplish the same thing with just regular javascript code. For example:

$('button').on('click', function(){
    showLoadingBar();
    longProcess();
    hideLoadingBar();
});

longProcess() is just a function that can take 1-3 seconds to process (it does a lot of calculations and manipulates the DOM but doesn’t do any ajax requests).

Right now, the browser halts/freezes during these 1-3 seconds, so what I would rather do is show a loading icon during this time. Is this possible? The code I have above pretty much ignores showLoadingBar().

Answer 1

The DOM won’t be updated until the current Javascript process ends, so you can’t do it just like that. You can however use setTimeout to get around that:

showLoadingBar();
setTimeout(function() {longProcess(); hideLoadingBar(); }, 1);

What happens above, in case it isn’t clear, is that showLoadingBar is executed, then a timeout is set up. The current process will then end and allow the DOM to update with the loading bar, before the timeout is invoked, very shortly after. The handler executes your heavy function and when it’s done, hides the loading bar again.