Function not immediately executed

Question

I have a function showLoading() that shows a spinner by appending a class:

function showLoading(){
    //console.log("show loading");
    loading = true;
    $("body").addClass("loading");
}

I call it like this:

Function heavyCrunch(){
    showLoading();

    <heavy crunching>

    hideLoading();
}

Now whenever I call the function just before some heavy load which takes > 1 second, it should show the spinner immediately, but it does not. In fact, it doesn't show at all. Whenever I click a button that triggers the heavyCrunch() function, it just freezes for a second or 2 and then immediately show the result. The spinner never shows. Why does this happen?

Should I call the function in an .after callback or something?

What sort of heavy crunching? Is it JavaScript processing? – showdev Jun 03 '15 at 18:30 — showdev, Jun 03 '15 at 18:30
Yes, it iterates trough a large array to compute a vector. – Gooey Jun 03 '15 at 18:32 — Gooey, Jun 03 '15 at 18:32

score 5 · Accepted Answer · answered Jun 03 '15 at 18:29

5

The DOM isn't refreshed while your code is executing. It waits until the end.

If you want the change to be visible, you have to defer the execution:

function heavyCrunch(){
    showLoading();
    setTimeout(function(){

        <heavy crunching>

        hideLoading();
    }, 0);
}

Note that in some cases of heavy processing you might want to release the pressure on the browser and let it the time to really draw. In such a case you may use a timeout greater than 0.

answered Jun 03 '15 at 18:29

Denys Séguret

355,860
83
755
726

little snippet for force redraw/refresh DOM `$(window).trigger('resize');` – Simone Nigro Jun 03 '15 at 18:34
1

@SimoneNigro You still need to defer the execution – Denys Séguret Jun 03 '15 at 18:34

score 2 · Answer 2 · answered Jun 03 '15 at 18:43

2

Mandatory jQuery answer:

$.when(showLoading()).done(function () {
    heavyCrunch();
});

Ref: https://api.jquery.com/jquery.when/

Example: jsFiddle

answered Jun 03 '15 at 18:43

technophobia

2,586
1
19
29

Function not immediately executed

2 Answers2