Let's take a look at both the JS manual and the English Dictionary explanation:
JS manual»settimeout (): Used to call a function or evaluate an expression after a specified number of milliseconds;
English explanation»timeout (): timeout, temporary rest, breaks;
JS manual»setinterval (): Invokes a function or evaluation expression in the specified period (in milliseconds). The function is called continuously until the Clearinterval () is called or the window is closed;
English explanation»interval (): interval; spacing; intermission;
It is not difficult to see, as long as we carefully understand the JS manual and the name of interpretation, can be very easy to separate the difference between the two. To put it simply, the difference between the two is that the settimeout () method executes the function after waiting for a specified time and executes only one incoming handle function. The SetInterval () method executes an incoming handle function after each specified interval, looping until the window or clearinterval () is closed.
<style>
/*demo CSS Tutorial * *
#demo P{font-weight:bolder}
#demo input{margin:10px 0 10px 20px;padding:3px 8px; font-size:14px;font-weight:bolder;}
#demo h5{margin-top:30px;padding:3px 10px;background: #d2d9df; letter-spacing:1px}
#demo pre{margin-bottom:20px;padding:10px;background: #eee; border:1px solid #ccc; line-height:18px;line-height:24px ; font-size:16px;}
</style>
<div id= "Demo" >
<p> Click the button to view the effect (eject after 2s): <input type= "button" value= "settimeout"/> <input type= "button" value= " Cleartimeout "/></p>
<p> Click on the button to view the effect (every 2s pop-up): <input type= "button" value= "SetInterval"/> <input type= "button" value= " Clearinterval "/></p>
<pre>
var timeout=function () {
alert (' Wait 2s to eject, only once! Cleartimeout can stop executing during wait time! ')
}
var interval=function () {
Alert (' Eject every 2s loop until clearinterval or close the window! ')
}
var input=document.getelementsbytagname (' input ');
var cleartimeoutfun=null;
var clearintervalfun=null;
Input[0].onclick=function () {
Cleartimeoutfun=settimeout (timeout,2000);
}
Input[1].onclick=function () {
Cleartimeout (Cleartimeoutfun);
}
Input[2].onclick=function () {
Clearintervalfun=setinterval (interval,2000);
}
Input[3].onclick=function () {
Clearinterval (Clearintervalfun);
}
</pre>
</div>
<!--demo End-->
<script>
var timeout=function () {
alert (' Wait 2s to eject, only once! Cleartimeout can stop executing during wait time! ')
}
var interval=function () {
Alert (' Eject every 2s loop until clearinterval or close the window! ')
}
var input=document.getelementsbytagname (' input ');
var cleartimeoutfun=null;
var clearintervalfun=null;
Input[0].onclick=function () {
Cleartimeoutfun=settimeout (timeout,2000);
}
Input[1].onclick=function () {
Cleartimeout (Cleartimeoutfun);
}
Input[2].onclick=function () {
Clearintervalfun=setinterval (interval,2000);
}
Input[3].onclick=function () {
Clearinterval (Clearintervalfun);
}
</script>