setTimeout使用闭包功能,实现定时打印数值

咱们此次使用setTimeout来实现一个按照时间定时,依次打印数值的例子.其实在早期的时候,也是我常常犯的一个错误,或者实现这种能力,彷佛js比较牵强,实际上是个人错,哈哈!没能理解JS强大之处.咱们直接进入主题吧!

 

注意,若是用setInterval来实现的话,那确定很简单,此次咱们是使用setTimeout.

 

咱们先从最简单思考入手.那就会写出下面的代码.

for(var i = 0; i < 5; i++){

setTimeout(console.log(i),i*1000);

}

这段代码虽然依次打印了,每一个i的值0,1,2,3,4.可是,执行的时间却没有起做用.为何呢? 由于 console.log() 是方法的执行调用,在调用这个方法后,当是立刻执行!,因此没有达到咱们预期的目的

 

那咱们继续看下面一段代码

for(var i = 0; i< 5; i++ ){

setTimeout(function(){

console.log(i);

},i*1000);

}

这里咱们使用一个匿名函数包含了打印的console.log来打印i,因此 i这个值是共享的,还没等到执行第一个setTimeout的时候,for循环已经执行完成,最后的i = 5,因此i 会打印四次

 

其实咱们两种解决办法,咱们先来看第一种:

var j = 0;

function abc(){

console.log("j = "+j);

j++;

}

 

for(var i = 0; i < 10; i++ ){

setTimeout(abc,i*1000)

}

这里咱们另一个全局变量来存储值,每执行一次函数abc,j就加一次,因此执行到setTimeout的时候,就会调用abc函数,因此会达到咱们预期的效果,可是这里这个j是一个全局变量,全局变量会形成容易改变其值或者命名冲突等问题.

 

第二种办法的实现,咱们再次引入闭包函数.由于闭包函数,每一次建立都会存在一个本身的空间来存储惟一的值.因此利用这个思惟.咱们把代码写成下面的代码.

for(var i = 0; i < 10; i++ ){

(function(x){

setTimeout(function(){

console.log(x)

},x*1000)

})(i)

}

 

咱们将i的每一次执行for循环的值,传给不一样建立的闭包函数,这样每个闭包函数里存储的i值,就都不会同样.因此就是达到咱们的想要的结果.

 

本文属于吴统威的博客,微信公众号:bianchengderen,QQ群:186659233 的原创文章,转载时请注明出处及相应连接:http://www.wutongwei.com/front/infor_showone.tweb?id=161 ,欢迎你们传播与分享.

咱们此次使用setTimeout来实现一个按照时间定时,依次打印数值的例子.其实在早期的时候,也是我常常犯的一个错误,或者实现这种能力,彷佛js比较牵强,实际上是个人错,哈哈!没能理解JS强大之处.咱们直接进入主题吧!