总结SetInterval与SetTimeout

Document自带的方法:

循环执行:var timeid = window.setInterval(“方法名或方法”,“延时”);

window.clearInterval(timeid); 停止定时: 清除已设置的setTimeout对象

定时执行:var tmid = window.setTimeout(“方法名或方法”, “延时”);

window.clearTimeout(tmid); 停止定时:清除已设置的setInterval对象

setTimeout和setInterval的语法相同。它们都有两个参数,一个是将要执行的代码字符串,还有一个是以毫秒为单位的时间间隔,当过了那个时间段之后就将执行那段代码。

    不过这两个函数还是有区别的,setInterval在执行完一次代码之后,经过了那个固定的时间间隔,它还会自动重复执行代码,而setTimeout只执行一次那段代码。

举例说明:

=========================================================

showTime();

function showTime() {     

var today = new Date();     

alert("The time is: " + today.toString());     

setTimeout("showTime()", 5000); }

一旦调用了这个函数,那么就会每隔5秒钟就显示一次时间

=============================================================

=============================================================

setInterval("showTime()", 5000);

function showTime() {    

  var today = new Date();     

alert("The time is: " + today.toString()); }

而setInterval却没有被自己所调用的函数所束缚,它只是简单地每隔一定时间就重复执行一次那个函数。 ==============================================================================

    如果要求在每隔一个固定的时间间隔后就精确地执行某动作,那么最好使用setInterval,而如果不想由于连续调用产生互相干扰的问题,尤其是每次函数的调用需要繁重的计算以及很长的处理时间,那么最好使用setTimeout。

实例运用

1。延迟切换tab 需求:页面上有几个tab,切换tab的时候,会对某个特定区域的数据进行拉取更新。 弊端:用户从第一个tab切换一直快速切到尾,就会产生n个ajax请求。其实用户只是需要看到最后一个tab的数据。

var changeTab = function(){ 
var timeId = 0; 
return function(tabId){ 
if(timeId){ 
clearTimeout(timeId); 
timeId=0; 
} 
setTimeout(function(){ 
//ajax do something 
},500); 
}; 
}(); 

一个比较简单的例子,绑定在tab上的onmouseover,如果用户不停的来回切换tab,ajax请求不会执行,只有停顿500毫秒后,才会执行,500毫秒,其实蛮短的,基本上不会影响到用户体验。

2。延迟自动完成 需求:在文本输入框中,监听用户输入,实现自动完成功能。 弊端:用户每输入一个字符,都会产生一个ajax请求,如果用户连续输入了一长串内容,请求次数就很多,实际上,最后的那次,才是用户需要的。 代码与上面例子类似。

3。延迟滚动 需求:页面的广告,需要用户滚动到哪,就跟到哪。 弊端:用户滚动在底,触发了N次的让广告重新定位的函数。其实,只需要当用户停下的时候,才触发一次就足够了。 代码与1类似。

其实有很多这样这样的例子,有些事情,不需要马上去执行,可以延迟一点时间才执行,时间很短,不影响用户体验,又可以减少很多不必要的消耗。

当要执行的方法中需要参数时

<script type=”text/javascript”>
//循环执行,每隔3秒钟执行一次 showalert()
window.setInterval(function(){
showalert(“aaaaa”);
}, 3000);
function showalert(mess)
{
alert(mess);
}
//定时执 行,5秒后执行showalert()
window.setTimeout(function(){
showalert(“bbbbbb”);
},5000);
</script>

详细出处参考:

http://www.jb51.net

http://blog.csdn.net/CrazyNotes/article/details/6254193

业精于勤荒于嬉 行成于思毁于随
原文地址:https://www.cnblogs.com/mistor/p/2674443.html