settTimeout vs setInterval
setTimeout:过一段固定的时间后,将代码提交到代码队列中排队。
setInterval:每隔一段固定的时间,执行一次代码。
他们两都接受两个参数,第一个参数是字符串或者函数,第二个参数是设定的时间值。第一个参数是字符串时有时会出错,因此建议使用函数作为第一个参数。
举个例子:有10个div,设置了宽度和高度,现在需要第一个div改变成蓝色后,第二个div改变为蓝色,...,最后一个div改变为蓝色
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
一、setTimeout
如果想要使用setTimeout实现上面的功能,那么可以有两种方式:
1)放在for循环中
for(var i=0;i<10;i++){
(function(i){
setTimeout(function(){
div[i].style.backgroundColor="blue";
},500);//这里都用了500,也就是说500秒后将所有的div变色都同时提交到代码队列,这样是看不到一个一个变颜色的,所以时间必须错开。
})(i);
}
for(var i=0;i<10;i++){
(function(i){
setTimeout(function(){
div[i].style.backgroundColor="blue";
},500*(i+1));//这样就是每隔500就提交一个,所有div一个一个变色
})(i);
}
现在又有一个需求,要让最后一个div变成蓝色后隔500毫秒又变回白色
for(var i=0;i<10;i++){
(function(i){
setTimeout(function(){
div[i].style.backgroundColor="blue";
if(i==div.length-1){
timer=setTimeout(function(){
div[i].style.backgroundColor="#fff";
},500);//这里的500是基于外面的500*(i+1)的,如果把if语句放在外面,则程序不一样
}
},500*(i+1));
})(i);
}
for(var i=0;i<10;i++){
(function(i){
timer=setTimeout(function(){
div[i].style.backgroundColor="blue";
},500*(i+1));
if(i==div.length-1){
setTimeout(function(){
div[i].style.backgroundColor="#fff";
},500*(i+2));//因为把前面第i个提交是等待了500*(i+1)毫秒,再隔500毫秒提交的话,就是500*(i+1)+500
}
})(i);
}
现在如果增加了一个按钮,按下按钮就要取消填色事件。如果点击事件直接写出clearTimeout(timer)的话,就只会取消最后一个div的填色事件。因为在for循环里,已经为所有的timer赋值了,在for循环外面再取消的话就会直接取消最后一次添加的timer事件。如果想要答道取消的效果,那么就不能用for循环。
2)不用for循环
var i=0;
function f(){
if(i<div.length){
div[i].style.backgroundColor="blue";
i++;
timer=setTimeout(f,500);//timer不能加在函数外面的那个语句上
}else{
div[i-1].style.backgroundColor="#fff";
}
}
setTimeout(f,500);
这样也可以达到上述效果,并且这里按下按钮可以随时终止变色事件。
btn.onclick=function(){clearTimeout(timer);}
二、setInterval
setInterval函数是每隔多长时间调用一次,因此不需要与for循环一起用。直接采用第二种方式就可以了
var i=0;
timer=setInterval(function(){
if(i<div.length){
div[i].style.backgroundColor="blue";
i++;
}else{
clearInterval(timer);
div[i-1].style.backgroundColor="#fff";
}
},500);
var btn1=document.getElementById("btn1");
btn1.onclick=function(){
clearTimeout(timer);
}
三、补充一点
setTimeout中的函数是不能带参数的,但是如果要传入一个参数怎么办呢,比如上面一直都是蓝色,我想要自己改变颜色,这样就需要再写一个函数,然后这个函数返回一个无参函数,蓝色的部分都需要改。另外如果传入的函数为ff(),那么这个函数ff就会立即执行,不会有延时的效果。
var i=0;
setTimeout(ff('red'),500);
function f(color){
if(i<div.length){
div[i].style.backgroundColor=color;
timer=setTimeout(ff('red'),500);
i++;
}else{
div[i-1].style.backgroundColor="#fff";
}
}
function ff(color){
return function(){
f(color);
}
}