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

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

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

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

上例子：

执行结果可以说明问题。

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

先上代码：

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

3.问题原因

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

4.解决方法

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

上代码：

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

原文：https://blog.csdn.net/i_recluse/article/details/80632321