(一),setTimeout();超时执行,超过一个时间点执行一次
setTimeout(fun,time);//fun:要执行的代码。time:等待执行的时间
执行和取消
1 var timeoutId = setTimeout(function(){2 alert('hello word')3 },1000);//一秒后执行4 5 clearTimeout(timeoutId);//取消定时器方法
小结:第二个参数表示等待多长时间的毫秒数,但是经过该时间代码不一定会执行。因为JavaScript是一个单线程解析器,因此一段时间内只能执行一段代码。为了控制代码执行,就会有一个JavaScript任务队列,这些任务会按照他们添加的顺序执行。setTimeout(),第二个参数是告诉JavaScript再过多长时间把当前的任务添加到队列中。如果队列是空的,那么添加的代码会立即执行。如果不是空的,就要等到队列前的代码执行完毕以后再执行。
(二),setInterval();间隔执行,每隔一个时间点,执行一次。
setInterval(fun,time);//fun:要执行的代码。time:代码执行的间隔
var timeoutId = setInterval(function(){ alert('hello word')},1000);//每一秒执行一次setInterval(timeoutId);//取消间隔执行
小结:拥有和setTimeout()一样的任务队列特性,且在不干涉的情况下,间歇执行会一直执行到页面被卸载。
(三)对比
setTimeout(),执行10次
var star = 0,max = 10;function setTimeoutFun(){ star++; //如果执行的次数还没有达到最大值,那么执行 if( star < max ){ setTimeout(setTimeoutFun,1000); }else{ console.log("stop"); } console.log(123);}setTimeout(setTimeoutFun,1000);
setInterval(),执行10次
var star = 0, max = 10, auto = null;function setIntervalFun(){ star++; //如果大于了10次,那么清除 if( star >= max ){ clearInterval(auto); console.log("stop"); } console.log(star);}auto = setInterval(setIntervalFun,1000);
总结:在执行超时调用是,如果没有特殊需要,没有比较跟踪ID。因为没执行完代码以后,就会自动停止。使用超时调用来模拟间隔调用是一种最佳的模式,因为后一个间隔调用可能会在前一个间歇调用结束前启动。而使用超时调用则可以避免这一点。