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);
　　}
}