for循环里使用 setTimeout 和回调函数常见的问题

newtrek 发布于2019-08-20 14:23 / 2572人阅读

摘要：问题一位同学在循环里连续发送了个请求，然后在的回调函数里使用了自增变量，但是值并不总能达到他的正确期望，经常出现问题。解决方法把或部分抽离成一个函数，然后传值调用它。这样在函数里会保存的一个副本，从而保证和期望效果一致。

问题

一位同学在for循环里连续发送了4个ajax请求，然后在success的回调函数里使用了自增变量i，但是i值并不总能达到他的正确期望，经常出现问题。

我把这个问题同理描述为setTimeout的使用：

// 代码一
for (var i = 0; i < 4; i++) {
    setTimeout(function(){
        console.log(i);
    }, 0);
}
// 输出结果如下
// 4
// 4
// 4
// 4

原因

JavaScript是单线程执行的，setTimeout函数会被放到任务队列里等待执行（即使等待时间为0），当for循环执行完之后，i的值已经变成了 4

ajax请求的回调函数也是这样，加上同时发送多个请求，它们的返回顺序也并不总是和发送顺序一致。

解决方法

把setTimeout或ajax部分抽离成一个函数，然后传值调用它。这样在函数里会保存i的一个副本，从而保证和期望效果一致。

// 代码二
function callback(temp){
    setTimeout(function(){
        console.log(temp);
    }, 0);
}
for (var i = 0; i < 4; i++) {
    callback(i);
}
// 输出结果如下
// 0
// 1
// 2
// 3

云服务器 GPU云服务器 js for循环回调 js中回调函数问题关于购买云主机和主机托管的常见问题 for循环和foreach

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81598.html

[Javascript实验课]循环中的闭包

摘要：执行出来的结果是这样的实验发现，无论如何都在最后执行，这证实了我们之前遇到的问题，因为在循环结束才执行，所以回调函数调用的取值必然是循环的最后一次。前言 https://developer.mozilla.org/zh-CN/docs/JavaScript/Guide/Closures MDN上描述闭包的章节阐述了一个由于闭包产生的常见错误，代码片段是这样的 for (var i...

teren 2019-08-22 11:28 评论0 收藏0
Javascript 面试中经常被问到的三个问题！

摘要：相反，在讨论时，面试中通常会提到三件事。而认为最后一个参赛者说了算，只要还能吃的，就重新设定新的定时器。试想，如果用户的操作十分频繁他每次都不等设置的时间结束就进行下一次操作，于是每次都为该用户重新生成定时器，回调函数被延迟了不计其数次。本文不是讨论最新的 JavaScript 库、常见的开发实践或任何新的 ES6 函数。相反，在讨论 JavaScript 时，面试中通常会提到三件事。我自己...

chnmagnus 2019-05-23 12:20 评论0 收藏0
Javascript 面试中经常被问到的三个问题！

摘要：相反，在讨论时，面试中通常会提到三件事。通过对事件对应的回调函数进行包裹以自由变量的形式缓存时间信息，最后用来控制事件的触发频率。而认为最后一个参赛者说了算，只要还能吃的，就重新设定新的定时器。 showImg(https://segmentfault.com/img/bVboH5x?w=1000&h=750); 想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！本...

PrototypeZ 2019-08-23 15:34 评论0 收藏0
大话javascript 4期：事件循环（2）

摘要：只要指定过回调函数，这些事件发生时就会进入任务队列，等待主线程读取。三主线程从任务队列中读取事件，这个过程是循环不断的，所以整个的这种运行机制又称为事件循环。一、任务队列同步任务与异步任务的由来单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。如果前一个任务耗时很长，后一个任务就不得不一直等着。如果排队是因为计算量大，CPU忙不过来，倒也算了，但是很多时候C...

李昌杰 2019-08-23 16:27 评论0 收藏0
夯实基础-JavaScript异步编程

摘要：调用栈被清空，消息队列中并无任务，线程停止，事件循环结束。不确定的时间点请求返回，将设定好的回调函数放入消息队列。调用栈执行完毕执行消息队列任务。请求并发回调函数执行顺序无法确定。异步编程 JavaScript中异步编程问题可以说是基础中的重点，也是比较难理解的地方。首先要弄懂的是什么叫异步？我们的代码在执行的时候是从上到下按顺序执行，一段代码执行了之后才会执行下一段代码，这种方式...

shadowbook 2019-08-22 17:16 评论0 收藏0