jquery - Show message while javascript is running -

i know such question has been requested several times have need show popup or message or whatelse when javascript function triggered , hide @ end.

see simple js fiddle

that's html code:

<div id='message'>default message</div> <input type='button' onclick='run();' value='start'> 

the div 'message' has contain simple text "running" or "please wait" or ...

that's js function took (delay) 3 seconds:

function run() {     var delay = 3000;   //-- 3 seconds     $( '#message' ).text('please wait ' + delay + ' seconds...');     var start = new date().gettime();     while (true) {         current = new date().gettime();         if ( (start + delay) < current) {             break;         }     }     $( '#message' ).text('done'); } 

the expected behaviour '#message' div contains "please wait 3 seconds..." before enter in loop , "done" string @ end.

but that's not. can explain me (most "again") why or suggest link find answer?

the js event loop busy running while (true) {} handle dom repaint.

use setinterval, settimeout, or requestanimationframe trigger next test of time instead of loop.

function run() {     var delay = 3000;   //-- 3 seconds     $( '#message' ).text('please wait ' + delay + ' seconds...');     var start = new date().gettime();     settimeout(whendelayisover, 50);      function whendelayisover() {         if ( (start + delay) < current) {             $( '#message' ).text('done');         } else {             settimeout(whendelayisover, 50);         }     } } 

… or use settimeout in first place.

function run() {     var delay = 3000;   //-- 3 seconds     $( '#message' ).text('please wait ' + delay + ' seconds...');     settimeout(whendelayisover, delay);      function whendelayisover() {         $( '#message' ).text('done');     } }