The difference between JS settimeout () and SetInterval () method

Source: Internet
Author: User
Tags setinterval

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>

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.