在前端开发中，我们经常需要使用 AJAX 来从服务器获取数据。当我们想要在循环中进行多次 AJAX 请求时，可能会遇到一个问题：如何将循环变量（索引）传递给 AJAX 回调函数？本文将介绍一种解决方案。
问题描述
假设我们有一个包含多个 URL 的数组，我们想要对每个 URL 发送 AJAX 请求并处理返回的数据。我们可以使用以下代码来实现：
-- -------------------- ---- -------
--- ---- - -------- ------- --------
--- ---- - - -- - - ------------ ---- -
--------
---- --------
-------- -------------- -
-- ----
-
---
-但是上述代码存在一个问题：当 AJAX 回调函数被调用时，它无法访问循环变量 i 的值，因为此时循环已经结束，并且 i 的值等于 urls.length。这意味着所有的 AJAX 请求都将使用最后一个 URL，而不是它们各自的 URL。
解决方案
为了解决这个问题，我们需要创建一个新的作用域来保存循环变量的值。我们可以使用立即调用的函数表达式（IIFE）来创建一个新的作用域，并将循环变量的值作为参数传递给回调函数。以下是修改后的示例代码：
-- -------------------- ---- -------
--- ---- - -------- ------- --------
--- ---- - - -- - - ------------ ---- -
---------------- -
--------
---- ------------
-------- -------------- -
-- ----
----------------- - ----- - --------
-
---
------
-在上述代码中，我们将立即调用的函数表达式传递给循环，并将循环变量 i 的值作为参数传递给该函数。该函数创建一个新的作用域，并将传递的参数命名为 index。我们在 AJAX 回调函数中使用 index 变量而不是 i 变量，因此我们可以访问每个循环迭代中的正确索引。
深入探讨
为什么需要使用 IIFE 来解决这个问题？这是因为 JavaScript 中只有函数和全局作用域，没有块级作用域。在循环中声明的变量具有函数范围，因此它们对于整个循环都是可见的。当我们在回调函数中尝试访问这些变量时，它们的值已经被更新为循环变量的最终值，因此我们无法访问它们的原始值。
通过使用 IIFE，在每个迭代中创建一个新的作用域，使我们能够保存每个索引的原始值，并在 AJAX 回调函数中访问它们。
总结
当在循环中使用 AJAX 请求时，需要注意如何将循环变量传递给回调函数。通过使用立即调用的函数表达式（IIFE），我们可以创建一个新的作用域并保存每个索引的原始值，从而解决这个问题。
-- -------------------- ---- -------
--- ---- - -------- ------- --------
--- ---- - - -- - - ------------ ---- -
---------------- -
--------
---- ------------
-------- -------------- -
-- ----
----------------- - ----- - --------
-
---
------
-希望这篇文章对你有所帮助，并指导你如何正确地在循环中使用 AJAX 请求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/28954