先来看看两者js手册及英文词典上的解释:
js手册»settimeout() : 用于在指定的毫秒数后调用函数或计算表达式;
英文释义»timeout() : 超时；暂时休息；工间休息;
js手册»setinterval() : 按照指定的周期(以毫秒计)来调用函数或计算表达式. 会不停地调用函数,直到 clearinterval() 被调用或窗口被关闭;
英文释义»interval() : 间隔；间距；幕间休息;
不难看出, 只要我们仔细体会js手册及命名释义, 就能很容易的区分开两者的区别. 简单的说, 两才的区别在于, settimeout()方法是在等待指定时间后执行函数, 且只执行一次传入的句柄函数. setinterval()方法是每指定间隔时间后执行一次传入的句柄函数,循环执行直至关闭窗口或clearinterval().
<style>
/*demo css教程*/
#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>点击按钮查看效果(2s后弹出): <input type="button" value="settimeout" /> <input type="button" value="cleartimeout" /></p>
<p>点击按钮查看效果(每2s弹出):<input type="button" value="setinterval" /> <input type="button" value="clearinterval" /></p>
<h5>演示用js如下</h5>
<pre>
var timeout=function(){
alert('等待2s后弹出,仅此一次!在等待时间内cleartimeout可停止执行!')
}
var interval=function(){
alert('每2s循环弹出,直至clearinterval或关闭窗口!')
}
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('等待2s后弹出,仅此一次!在等待时间内cleartimeout可停止执行!')
}
var interval=function(){
alert('每2s循环弹出,直至clearinterval或关闭窗口!')
}
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>