/    Sign up×
Community /Pin to ProfileBookmark

javascript processing order

Copy linkTweet thisAlerts:
Dec 10.2008

hi there
here is my question.

I have a javascript function that gets called by clicking an element on the page which then performs some processing on some other elements on the page, this ends up taking some time because the processing is a bit complex.
So I figured I need to put some kind of loading/processing indicator while my js function is running so that the user knows that their click worked and shouldnt keep on clikcing since they dont see anything happening .. so this is what I did
here is my processing function
function doSomeWork(){

//in the start of this function I called another function that displays the loading message
showLoading(true);

// all the processing

//and after all processing is done – I take the loading message off
showLoading(false);
}

showLoading is a simple function that hides or displays a loading message div
function showLoading(state){
someDiv.style.display = state ? ” : ‘none’;
}

simple enough ..

now the problem is that for some weird reason when I run this and my doSomeWOrk function gets called .. it first finishes all the processing and then tries to display the loading image and then obviously since all the processing is already done it then hides the loading images rightaway .. so u still end up waiting for a few seconds for the processing to happen and then the loading images shows up and goes away right away ..

any ideas whats going on

to post a comment
JavaScript

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@voidvectorDec 11.2008 — I believe your problem is caused by the fact that the browser doesn't redraw the page during your process.

You can get around it by using setTimeout('blahblah', 0);
Copy linkTweet thisAlerts:
@adeelmahmoodauthorDec 11.2008 — okay well that makes sense that browser isnt redrawing until it gets to the end of the first function .. but I tried using setTimeout .. didnt worked .. still same thing .. image shows up after the processing is complete

setTimeout('showLoading(1)', 100);
Copy linkTweet thisAlerts:
@adeelmahmoodauthorDec 11.2008 — if I put an alert message right after the

style.display = 'block'

line .. then it works fine ..

dont know wat that means .. does that alert box makes the browser redraw .. doesnt makes sense ..

thanks for ur help though .. any other ideas
Copy linkTweet thisAlerts:
@voidvectorDec 11.2008 — No, not "setTimeout('showLoading(1)', 100);". What I meant was to call timeout on the processing part, so there is an instantaneous "timeout" before your process to allow rendering.

[code=php]
function doSomeWork(){
// all the processing

showLoading(false);
}

function scheduler(){
showLoading(true);
setTimeout('doSomeWork()',0);
}

function showLoading(state){
someDiv.style.display = state ? '' : 'none';
}
[/code]
Copy linkTweet thisAlerts:
@adeelmahmoodauthorDec 11.2008 — That did it .. Thanks
×

Success!

Help @adeelmahmood spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.20,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...