SetTimeout and setinterval usage of JS timer

Fundamentally, it's important to understand how timers work. Typically, the behavior of the timer is not intuitive, because it is in a separate thread, let's start with a three-function test, and we have the opportunity to build and control the timer for each function.

JS Set delay:
Using setinterval and setting the delay function settimeout very similar. SetTimeout is used to delay a period of time and then perform an operation.
SetTimeout ("function", time) sets a timeout object
SetInterval ("function", time) sets a timeout object
SetInterval for automatic repetition, settimeout will not repeat.
Cleartimeout (object) clears the SetTimeout object that has been set
Clearinterval (object) clears the SetInterval object that has been set

Using timers to implement JavaScript deferred or repeated execution

var id = settimeout (fn,delay); Starts a timer that calls a specific function after the delay time, which returns a unique ID, which is canceled at a later time by the ID timer;
var id = setinterval (fn,delay), similar to settimeout, but it constantly calls the function (every time a certain delay) until it is canceled;
Clearinterval (ID), cleartimeout (ID), accept the ID of the timer (returned by any one of these functions) and stop calling the timer.

Example 1:

The code is as follows	Copy Code
<script language= "JavaScript" type= "Text/javascript" > <!-- function Hello () { Alert ("Hello"); } Window.settimeout (hello,5000); --> </script>

This code will cause the page to open for 5 seconds before the dialog box "Hello" is displayed. The last sentence can also be written as:

The code is as follows	Copy Code
Window.settimeout ("Hello ()", 5000);

Example 2

The code is as follows

Copy Code

<script> function Timer (maxtime,id,callback) { MaxTime: time, Unit s ID: Container ID showing timer information Callback: Timer End callback var tmp function Countdown () { if (maxtime >= 0) { Hours = Math.floor (MaxTime/(60 * 60)); TMP = maxtime-hours * 60 * 60; minutes = Math.floor (tmp/(60)); TMP = tmp-minutes * 60; seconds = tmp msg = "Distance end also has" + Hours + "hour" + minutes + "min" + seconds + "seconds" document.getElementById (id). InnerHTML = msg; MaxTime-= 1; } else { Clearinterval (timer); if (typeof callback== "function") callback ()//callback after the execution countdown completes } } var timer = setinterval (function () {countdown ()}, 1000); } Window.onload=function () { New Timer (' Timer1 ', function () {document.getElementById ("timer1"). InnerHTML = "Timer 1 complete";}); New timer (, ' Timer2 ', function () {document.getElementById ("Timer2"). InnerHTML = "Timer 2 complete";}); New Timer (' Timer3 ', function () {document.getElementById ("Timer3"). InnerHTML = "Timer 3 complete";}); } </script> <div id= "timer1" style= "color:red; font-size:28px "></div> <div id= "Timer2" style= "color:red; font-size:28px "></div> <div id= "Timer3" style= "color:red; font-size:28px "></div>

Example 2 is the last time we want the timer. The front is just a simple talk about the timing of the implementation methods and reasons.