Difference between setTimeout and setinterval:
1. After setTimeout is set, it will only be executed once after the specified time
2. After setinterval is set, it will be executed at a specified time.
3. setTimeout is generally used inside a method to achieve the effect of loop calling.
4. setinterval is generally used outside the method to achieve the loop call effect.
Example of setTimeout:
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> untitled document </title>
<SCRIPT type = "text/JavaScript" Language = "JavaScript">
VaR timeout;
// Display time
Function displaytime (){
VaR date = new date ();
VaR hour = date. gethours ();
Hour = hour <10? "0" + hour: hour;
VaR minute = date. getminutes ();
Minute = minute <10? "0" + minute: minute;
VaR second = date. getseconds ();
Second = Second <10? "0" + Second: second;
// Time, minute, and second
VaR time = hour + ":" + minute + ":" + second;
// Display the time in the text box
Document. getelementbyid ("txttime"). value = time;
// Parameter 1: function parameter 2 to be called: latency return value: timeout object
Timeout = Window. setTimeout ("displaytime ()", 1000 );
}
Function stoptime (){
Window. cleartimeout (timeout); // clear the timeout object
}
Function continuetime (){
Timeout = Window. setTimeout ("displaytime ()", 1000 );
}
</SCRIPT>
</Head>
<Body onload = "displaytime ()">
<Input type = "text" id = "txttime"/>
<Input type = "button" onclick = "stoptime ()" value = "stop"/>
<Input type = "button" onclick = "continuetime ()" value = "continue"/>
</Body>
</Html>
Setinterval example;
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> untitled document </title>
<SCRIPT type = "text/JavaScript" Language = "JavaScript">
VaR timeout;
// Display time
Function displaytime (){
VaR date = new date ();
VaR hour = date. gethours ();
Hour = hour <10? "0" + hour: hour;
VaR minute = date. getminutes ();
Minute = minute <10? "0" + minute: minute;
VaR second = date. getseconds ();
Second = Second <10? "0" + Second: second;
// Time, minute, and second
VaR time = hour + ":" + minute + ":" + second;
// Display the time in the text box
Document. getelementbyid ("txttime"). value = time;
}
Function stoptime (){
Window. cleartimeout (timeout); // clear the timeout object
}
Function continuetime (){
Timeout = Window. setinterval ("displaytime ()", 1000 );
}
Timeout = Window. setinterval ("displaytime ()", 1000 );
// Window. onload form loading event. The left and right parentheses cannot be added to the subsequent function.
// Window. onload = displaytime (); // The function is not called and will not work.
Window. onload = displaytime; // correct
</SCRIPT>
</Head>
<Body>
<Input type = "text" id = "txttime"/>
<Input type = "button" onclick = "stoptime ()" value = "stop"/>
<Input type = "button" onclick = "continuetime ()" value = "continue"/>
</Body>
</Html>