JS中For循环中嵌套setTimeout()方法的执行顺序

您所在的位置:网站首页 js循环嵌套方法 JS中For循环中嵌套setTimeout()方法的执行顺序

JS中For循环中嵌套setTimeout()方法的执行顺序

2024-06-08 07:06| 来源: 网络整理| 查看: 265

在For循环中执行setTimeOut()方法的代码,执行顺序是怎样的呢?

代码如下

复制代码

function time() {   for(var i= 0;i console.log(0) ——> for(i=1) ——> console.log(1) ——> for(i=2) ——> console.log(2) ——> for(i=3) ——> console.log(3) ——> for(i=4) ——> console.log(4) ——> for(i=5) ——> 执行结束

但是在实际中的流程是这样的:

for(i=0) ——> for(i=1) ——> for(i=2) for(i=3) ——> for(i=4) ——> for(i=5)ps:(这段循环都在一秒内完成了)——> console.log(5) ——> console.log(5) ——> console.log(5) ——> console.log(5) ——> console.log(5) ——> 执行完成

那么有什么办法可以避免呢?

目前来看方法应该还是很多的,我目前知道的有三个,其他的方法有兴趣可以自己再百度一下。

第一个方法的思路很简单,因为setTimeOut()是异步执行,所以我们让它立即执行就可以了。

复制代码

for (var i = 0; i < 5; i++) { (function (i) { setTimeout(function () {       console.log(i);   }, 1000 * i); })(i); //这里使用闭包 }

复制代码

这段函数会让JS检测到setTimeOut时不再放到队列中进行等待,而是立即运行setTimeOut()。所以能按我们所想的进行输出。

第二个方法是使用let而不是var。即:

for (let i = 0; i < 5; i++) { setTimeout(function() { console.log(i); }, 1000 * i); }

为什么let就行而var不行呢?因为let的作用域是块作用域,所以每次JS检测到setTimeOut把setTimeOut放到队列的同时,let定义的i的值也会跟随setTimeOut进去队列。所以每次循环后队列里的setTimeOut里的i的值是不一样的。而var定义的i是无法进入setTimeOut的。i只能在运行到setTimeOut时才会向外层环境申请i的值,而这个时候i的值已经变成5了。

 



【本文地址】


今日新闻


推荐新闻


    CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3