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值都会变为定时函数的私有变量值,这样就达到了预期目的。

在面试中,如果面试官会问到关于javascript中的setTimeout和for循环问题,可以做如下回答: JavaScript中的setTimeout和for循环是两个常用的功能。setTimeout是一个用于延迟执行一段代码的方法,而for循环则用于重复执行一段代码。 setTimeout的语法是: ```javascript setTimeout(function, milliseconds) ``` 其中function是要执行的代码块,milliseconds是延迟的毫秒数。setTimeout会在指定的延迟间后执行代码块。 常见的应用场景是在网页中实现定效果,例如延显示或隐藏某个元素、轮播图等。另外,通过递归调用setTimeout,可以实现循环执行某个代码块的效果。 for循环的语法是: ```javascript for (初始化变量; 判断条件; 执行操作) { //要重复执行的代码块 } ``` for循环用于重复执行指定的代码块,可以通过初始化变量、判断条件和执行操作来控制循环次数。 在面试中,可能会考察处理带有延操作的循环问题,那么就可以结合setTimeout和for循环来解决。通过将循环体包装成一个立即执行函数,并使用setTimeout来延执行,可以实现一定的间隔间后再执行下一次循环,避免JavaScript的单线程执行机制导致阻塞。 然而,需要注意的是,使用setTimeout执行的循环可能会引发问题,比如可能无法准确控制循环次数、存在变量作用域问题等。所以在实际项目中,可能会使用一些更高级的方案来解决这类问题,比如利用Promise实现延循环使用ES6的异步函数等。 总结起来,setTimeout和for循环JavaScript中常用的功能,对于处理延执行和循环执行的需求有很大帮助,但在具体应用中需要注意一些问题,灵活运用才能发挥出更强大的效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值