Timers in JavaScript

This article address: "http://www.xiabingbao.com/javascript/2015/04/20/javascript-timer/"

In the previous article "Timers in JavaScript", we briefly introduced the use and principle of the settimeout () and setinterval () two timer methods. But when I added a message to my node instant chat system yesterday, I found the new feature of the timer. Of course, this is a new discovery for me, in fact, these things have already existed.

1. Minimum run time interval

In settimeout () and setinterval () we were able to set the time interval to allow the next event to 大致 occur in which time period. If we set the time interval at 0, then it will be executed after 0ms, that is, immediately. We can use the following code to output:

functionget () {varTimer =NULL; varDate =NULL; vardiff = 0; varLast = 0; varnow = 0; varNums = 0; varcolor = ' #000 '; varProcess = document.getElementById ("process")); Timer= SetInterval (function() {Date=NewDate (); now=Date.gettime (); Diff= Now-last;//two time difference between front and backLast =Now ; Nums++; Color= diff===0? ' #f00 ': ' #000 '; Process.innerhtml+ = ' <p> ' +now+ ' (<span style= "color: ' +color+ '" > ' +diff+ ' </span>) </p> '; if(nums>=100) {clearinterval (timer); }    }, 0);} Get ();

We print the time difference before and after each execution of SetInterval () to the screen (the following data uses Chrome 42.0.2311.90 version Test):

1429545782409 (1)    1429545782412 (3)    1429545782414 (2)    1429545782420 (6)     1429545782425 (5)    1429545782430 (5)    1429545782437 (7)     1429545782443 (6)1429545782449 (6)    1429545782454 (5)    1429545782460 (6 )1429545782466 (6)1429545782471 (5)1429545782476 (5) ...

From the printed data can be seen, setinterval () at the time interval of 0ms, the output of the difference between the basic 1~10ms, but also can be accepted within the range. The tests under IE11 are basically consistent with Chrome's data, and the time lag that 0 can occur under Firefox.

2. Timer interval when the label is not visible

In fact, whether the time interval is set to 0ms or other time interval, the runtime will have time error, than the set interval of more than 1~16ms milliseconds, sometimes there will be more difference.

We sometimes flash the title on an occasion, prompting for a new message from the user's current tab:

var // Store original title function Blink () {    = Document.title = = Backup? "There is a new message" " : Backup            ; = SetInterval (blink, 500);

The above code can be 500ms of the title turns flashing, when we are in the current tab, the basic sense of the timer generated error. But if we switch to other tabs or minimize it, we can see that the headline flicker is slowing down a lot, almost to about 1000ms.

For more accurate recording of changes in the time interval, we hereby supplement the above code by recording the current millisecond timestamp when the caption is flashing, while marking the status when the current tab is visible and when it is not visible "view Demo":

1 //Title Flashing2 functionBlinktile (title, timeout) {3     varSelf = This;4     varTimer =NULL;5     varBackup =Document.title;6     varLast = 0;7     varProcess = document.getElementById ("process"));8 9Self.init =function(title, Timeou) {Ten         if(Title! =undefined) { OneSelf.title =title; A         } -Self.timeout = Timeout = = undefined? 500: timeout; -     } the  -Self.start =function(){ - self.stop (); -  +         functionBlink () { -Document.title = Document.title = = Backup?Self.title:backup; + Self.check ();  A         } at Blink (); -Timer =setinterval (Blink, self.timeout); -     } -  -       -  inSelf.stop =function(){ -         if(Timer! =NULL){ toDocument.title =backup; + clearinterval (timer); -Timer =NULL; the         } *     } $ Panax Notoginseng      -     //Print the time difference while keeping the scroll bar at the bottom theSelf.check =function(){ +         varDate =NewDate (); A         varnow =date.gettime (); the         vardiff = now-Last ; +Last =Now ; -process.innerhtml + = ' <p> ' +now+ ' (' +diff+ ') </p> '; $Process.scrolltop =Process.scrollheight; $     } -  - Self.init (title, timeout); the } - varBlink =NewBlinktile (' New message ' ', 500);Wuyi Blink.start (); the  - //the visible State of the tab page Wu varhidden, state, Visibilitychange; - if(typeofDocument.hidden!== "undefined") { AboutHidden = "hidden"; $Visibilitychange = "Visibilitychange"; -State = "Visibilitystate"; -}Else if(typeofDocument.mozhidden!== "undefined") { -Hidden = "Mozhidden"; AVisibilitychange = "Mozvisibilitychange"; +State = "Mozvisibilitystate"; the}Else if(typeofDocument.mshidden!== "undefined") { -Hidden = "Mshidden"; $Visibilitychange = "Msvisibilitychange"; theState = "Msvisibilitystate"; the}Else if(typeofDocument.webkithidden!== "undefined") { theHidden = "Webkithidden"; theVisibilitychange = "Webkitvisibilitychange"; -State = "Webkitvisibilitystate"; in } the  the varProcess = document.getElementById ("process")); About //add listener to display status changes in title theDocument.addeventlistener (Visibilitychange,function() { the     if(document[state]== "Hidden"){ theprocess.innerhtml + = ' <p style= "color: #f00;" >====== leave ======</p> '; +}Else{ -process.innerhtml + = ' <p style= "color: #f00;" >++++++ back ++++++</p> '; the     }Bayi},false);

View Code

After running, we can see that the data under the program record is (only part of the data below):

1429547223336 (505)   1429547223837 (501)    ====== leave ====== 1429547225296    (1459)     1429547226296(   1429547227296) 1429547228297 (1001)     ++++++ back ++++++   1429547229137 (840)    1429547229637 (500)

We clearly see that when the tab is not visible (after "left"), the time difference has risen by about 1000ms; When the tab is visible ("back"), the difference is restored to about 500ms. However, when the label page has just switched over, the time difference changes relatively large, and then stabilized. In fact, the browser in order to reduce the use of CPU and battery consumption, and so on when the tab is not visible, specifically to improve the time interval.

However, it should be noted that under IE11, the visible state of the label does not affect the time interval of the timer.

3. Summary

In the above code, we set the time interval is 500ms, when the tab is not visible, the time interval will be increased to 1000ms; if we set the interval to 1500ms, 2500ms, you can modify the program to run, whether you can find what the law.

Blog Address: http://www.xiabingbao.com

Timers in JavaScript