js setTimeout和for循环搭配使用时变量的问题

最近在写一个定时打字的效果,须要for循环和setTimeout搭配使用,出现了一些问题,在网上查找找到了问题所在。浏览器

1.setTimeout(func,time)函数运行机制函数

    setTimeout(func,time)是在time(毫秒单位)时间后执行func函数。浏览器引擎按顺序执行程序,遇到setTimeout会将func函数放到执行队列中,等到主程序执行完毕以后,才开始从执行队列(队列中可能有多个待执行的func函数)中按照time延时时间的前后顺序取出来func并执行。即便time=0,也会等主程序运行完以后,才会执行。
spa

上例子:blog


执行结果能够说明问题。队列

2.for循环和setTimeout搭配使用时出现的问题作用域

先上代码:for循环


我本意是要每隔100ms打印一次i的值,每次i值应该变化,但事实倒是三次i的值都是3,也就是都是最后一次for循环i的值。变量

3.问题缘由原理

    缘由是上面讲的setTimeout运行机制的问题:定时函数被加入执行队列,等主程序运行完毕时,此时再调用定时函数,i的值已经变为3,三次的定时函数都会共用i=3这个值。循环

4.解决方法

    对setTimeout进行封装,目的是要每次调用定时函数都有本身的私有变量值。其实就是做用域的问题,把这个问题搞清楚,就能够解决这个问题,也不止我下面的一种解决方法,但原理都是同样。

上代码:


    将setTimeout进行封装,此时定时函数的变量做用域就变为f函数代码块内,每次for循环传给定时器的i值都会变为定时函数的私有变量值,这样就达到了预期目的。