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.οnclick=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.οnclick=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); } }