understanding a bit more about setTimeOut

@gautamz07Jan 23.2015

Hey guys i have the following part small snippet in my JS snippet :

[CODE]setTimeout( function() { isRevealed = !isRevealed; isAnimating = false; console.log(‘set Timeout reveal ‘ + reveal); if( reveal ) { noscroll = false; enable_scroll(); } }, 2000 );[/CODE]

now the above setTimeout does’t seem to really be a critical part of the code snippet , as if i take off the setTimeout function and only keep the lines of code inside it , everything still functions properly .

so basically what is the setTimeout function doing ??

My calculated guess is its doing the following :

setTimeout( function() {
~~[COLOR=”#FF0000″]~~isRevealed = !isRevealed;
isAnimating = false;
console.log(‘set Timeout reveal ‘ + reveal);
if( reveal ) {
noscroll = false;
enable_scroll();
}[/COLOR]
}, 2000 );

its executing all the lines of code in marked in red and after that the control is still inside setTimeOut for 2 seconds. what i mean by that is after the execution of the content marked in red , no other part of the script(this setTimeout function is just part of a small JS script) is going to execute for the next 2 secounds .

Thanks.

Gautam.

to post a comment

JavaScript

3 Comments(s) _↴

@TcobbJan 24.2015 — #It means that the code marked in red won't run until two seconds AFTER the code snippet is run. And actually it could possibly take longer than that. SetTimeout inserts the function specified as its first argument into the execution loop after the interval specified by the second argument. If some other code is running when it is inserted into the loop that other code must finish first.

@rootJan 24.2015 — #[B]setTimeout[/B] - runs whatever function after the specified time. eg. [B]setTimeout([/B]myFunc,[COLOR="#B22222"]2000[/COLOR][B]);[/B] - called after 2 seconds,if a handle was passed to a variable, it can be prematurely cleared with [B][COLOR="#8B4513"]clearTimeout[/COLOR]( [/B][I]handle [/I][B]);[/B]

[B]setInterval [/B]- can run either instantly call the function in initiation and every time period thereafter OR it can run after the specified time and every time period specified thereafter. eg.

[B]setInterval([/B]myFunc,[COLOR="#B22222"]2000[/COLOR][B]);[/B]

[B]setInterval([/B][COLOR="#808080"]"myFunc()"[/COLOR],[COLOR="#B22222"]2000[/COLOR][B]);[/B] - called after 2 seconds and every 2 seconds until page close or if a handle was passed to a variable, cleared with [B][COLOR="#8B4513"]clearInterval[/COLOR]( [/B][I]handle [/I][B]);[/B]

Each has its place, setTimeout is useful if you have an event that triggers occasionally or you want to set up a script to run at a long period after the page has initialized.

setTimeout gets abused by being used as a repetitive call at a set time period, that is where you are meant to use setInterval as it will call the function repeatedly and only needs to be set once. Whilst computers are more powerful than those of 10 or so years ago, it was more apparent that this divergence was taking place, why? Because a setTimeout and setInterval take [I][B]n[/B][/I] milliseconds to initialize, this used to be anything up to 250 ms (average) per initialization, so whilst setInterval may cause a quarter second delay or less to initialize, once it is running it takes no further time to initialize, unlike setTimeout which each time it is encountered, adds time to the time time, so your 2000 ms call may not be 2000, it might be 2250 ms because of the 250 odd ms that it takes to initalize the call, then wait until execution. The main point, going back to the clock script problem is that each call can add up to 250 ms to the time the next function call is made. That is a problem, especially if you are counting time or counting down, etc.

Example of a very poorly implemented clock type script (one of thousands I might add)

Despite the fact that you will see setTimeout used in scripts that are used to update things like clocks on websites, it will over a period of time diverge from real time because you often find that these same scripts will be using variables to track hours, minutes and seconds, then pad the numbers if needed and then concatenate the variables in to a string that then is updating an element on a page that is repeatedly subjected to a [COLOR="#B22222"]document[/COLOR].getElementById() function.

Unfortunately I can't find a web example of a well written clock script, so search this forum for one of many of my posts exhibiting a completely fool proof way of displaying a date / datetime, a very basic example below demonstrates this.

[CODE]<div id="clock">
 <script>// simple clock
 clock = {
 update:function(){
 clock.target.innerHTML = new Date().toUTCString().slice(17,25);// gets type format 00:00:00
 
  },
  init:function(){
   if( clock.target=document.getElementById("clock") ){
   clearInterval( clock.auto );
   clock.auto = setInterval("clock.update()",1000);
   }
 
  },
  auto:setInterval("clock.init()",1000)
 }
 </script>
 </div>
 [/CODE]

as a rough idea, no formatting / padding, counting variables setTimeouts etc, what it does is try to hook the target DIV element by its ID and set that ID value in a variable that only requires setting once, the clock.init() function is called every second until the object is hooked and then clears and sets a new timer and then begins updating the clock. Very simple, very few lines of code and is expandable and does not interfere with other scripts because the JSON method of coding is self contained.

Couple of examples of how to use the timeout / interval event timers.

@gautamz07authorJan 24.2015 — #Thanks Dude ! That explanation i see is really elaborate , Thanks a ton . I'am gonna go home and read it . ?

Also in #JavaScript _↴

Using RegExp to validate date in format mm.dd.yy What does this do?Click-to-expand-menu js file missing??

Success!

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

Tweet This

understanding a bit more about setTimeOut

3 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

understanding a bit more about setTimeOut

3 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

3 Comments(s) _↴

Also in #JavaScript _↴