setTimeout和setInterval都属性Javascript中的定时器,可以规定延迟时间再执行某个操作,不同的是setTimeout在规定时间后执行完某个操作就停止了,而setInterval则可以一直循环下去。
另外,setTimeout和setInterval还能通过扩展运算符形式进行传参;现在IE10及以上版本,其它主流浏览器中,都已支持。
一.setTimeout使用
setTimeout()方法用于指定的毫秒数后调用函数或计算表达式。
1.1 语法:
setTimeout(code, millisec)
1.2 实例:
setTimeout(function(){
console.log('执行了...')
}, 1000);
1.3 setTimeout循环执行多次:
由于setTimeout只执行一次,这里在满足条件情况下,运行执行函数即可。
var index = 0;
function callback(){
//开始计时
setTimeout(function(){
//循环执行5次后,结束计时
if(index<5){
callback();
}
console.log('执行次数', index++);
}, 3000)
}
callback();
输出结果:
1.4 清除setTimeout计时器
setTimeout计时器虽然只执行一次,但在一些特殊场景下,需在终止即将执行的计时函数,这时则需要用到clearTimeout来。比如Vue开发时,页面在无感刷新情况下,不消除之前定义的执行函数,则会出现重复累加;又或者在满足一定条件后,需要将之前定义好执行函数终止掉。具体如下:
var index = 0,
handle = null;
function callback(){
clearTimeout(handle);
//开始计时
handle = setTimeout(function(){
//循环执行5次后,结束计时
if(index<5){
callback();
}
console.log('执行次数', index++);
}, 3000)
}
callback();
二、setInterval使用
setInterval()方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。
setInterval()方法会不停地调用函数,直到clearInterval()被调用或窗口被关闭。
2.1 语法
setInterval(code, millisec)
2.2 实例
由于setInterval设定计时周期后,则会一直执行下去,所以在满足特定条件情况下,通过clearInterval来结束计时功能。代码如下:
var index = 0,
handle = null;
function callback(){
//循环执行6次后,结束计时
if(index>=5){
clearInterval(handle);
}
console.log('执行次数', index++);
}
//开始计时
handle = setInterval(callback, 3000)
输出结果:
三、setTimeout和setInterval的传参功能
在setTimeout和setInterval中除了定义执行函数和执行周期(毫秒)外,还可以通过扩展运算符的形式,追加入参数据,这在很多文档中并未涉及到的。
3.1 setTimeout参数
参数 | 描述 |
---|---|
func | 必需。要执行的javascript代码串,也可以是一个函数 |
time | 必需。执行周期(毫秒数) |
param1, param2, ... | 可选。传入执行函数其他参数 |
语法:
setTimeout(func, time, ...)
3.2 setInterval参数
参数 | 描述 |
---|---|
func | 必须。要执行的javascript代码串,也可以是一个函数 |
time | 必须。执行周期(毫秒数) |
param1, param2, ... | 可选。传入执行函数其他参数 |
语法:
setInterval(func, time, ...)
3.2 案例
//传入参数a和b,计算求和
setTimeout(function(a, b){
console.log(a + '+' + b + '=' + (a+b));
}, 3000, 5, 10);
//传入参数a和b,计算总和,大于100终止
var total = 0,
handle = setInterval(function(a, b){
total += a + b;
console.log('total:', total);
if(total>100){
clearInterval(handle);
}
}, 3000, 10, 30);
输出结果:
3.3 for中添加定时器
由于setTimeout的执行函数运行是,for循环早已结果,故 i 的值已递增为5,所以5个定时器执行出的结果都为5。
//未通过定时器传入参数
for(var i = 0; i < 5; i++){
setTimeout(function(){
console.log('value:', i);
}, 2000*(i+1));
}
输出结果:
//通过定时器会传入参数
for(var i = 0; i < 5; i++){
setTimeout(function(value){
console.log('value', value);
}, 2000*(i+1), i);
}
输出结果:
四、低版本兼容处理
在低版本中,无法实现传参功能,可以自定义实现同样效果,代码如下:
var _timeout = setTimeout;
//改写setTimeout定时器
window.setTimeout = function(callback, time){
//获取除callback和time以外的参数,并以数组形式返回
var args = Array.prototype.slice.call(arguments, 2);
//定义新的执行函数
var _cb = function(){
callback.apply(null, args);
}
//定义setTimeout定时器
_timeout(_cb, time);
}
//定义计时器
window.setTimeout(function(a, b){
console.log('a:'+a, 'b:'+b);
}, 1000, 5, 100);
输入结果: