标签（空格分隔）： javascript
最近想要去实现一个定时函数，定时的去改变一个元素的opacity，从而实现淡入浅出的效果，我写出的代码是这样的
var pic=document.getElementById('picture')
for(var i=0;i<=10;i++){
setTimeout(function(){
pic.style.opacity=i*0.1
console.log(i)
},1000)
}
结果一直不变，在控制台console.log(i)发现i一直没变，每次输出都是11，想了想是因为setTimeout()函数是异步实现的，在开始回调函数的时候，for循环早已经结束了，而引用的i则是最后一次循环结束后i的值11。
那我就用闭包来保存i的值吧
for(var i=0;i<=10;i++){
(function(j){
setTimeout(function(){
pic.style.opacity=j*0.1
console.log(j)
},1000)
})(i)
}
试了一下，发现还是不行，这次console对了能正确输出i的值，但这不是我想要的啊，我要实现opacity定时改变，然而这个怎么是一秒就完成了？理想中的结果应该是隔一秒输出一个数啊，我在查阅一些资料以后发现，这已经不是闭包能解决的了，由于javascript的单线程的机制，settimeout的执行必然是在循环之后的，即使把倒计时时间设为0也是这样。
我又尝试了下不在循环里面写 setTimeout，结果也是这样
setTimeout(function () {
console.log(1)
}, 3000);
setTimeout(function () {
console.log(2)
}, 3000);
setTimeout(function () {
console.log(3)
}, 3000);
结果是在3秒后连续输出了123，并没有停顿3秒，因为setTimeout这个倒计时函数的回调是异步执行的，这样for循环的问题就可以解释了，for循环执行了多次setTimeout函数，但是回调都是各自独立的，都是在1秒后执行回调函数，几乎在同时把我想要的那个元素的opacity设置了11次，自然是看不到“淡入”的效果了。看样子我是把setTimeout函数当成延时函数是不能这么写的了，那还有没有别的方法呢
方法肯定是有的，可以去尝试一下回调地狱
setTimeout(function(){
console.log(1)
setTimeout(function(){
console.log(2)
setTimeout(function(){
console.log(3)
...
},1000)
},1000)
},1000)
这实际上就是递归调用自身，抽象一下
var makeInterval=function(){
var times=0;
var step=function(){
console.log(times)
times++
if(times<10){
setTimeout(step,1000)
}
}
setTimeout(step,0)
}
makeInterval()
实际上还可以使用setInterval来写这段代码
var makeInterval=function(){
var times=0;
var timer=setInterval(function(){
if(times==9){
clearTimeout(timer)
}
console.log(times)
times++
},1000)
}
makeInterval()
关于使用setTimeout还是setInterval在stackoverflow上有解释，基本上是可以互相替换的，本人更加推荐使用setInterval，认为它更适合实现间隔的功能。
至此，已经解决了 for 循环的 bug，总结原因，还是自己对这个函数有点想当然，然而真正去写的时候才能发现问题，可能也有一些朋友会犯和我一样的错误，这里写出来和大家分享一下。
