异步操作中，JS遍历的技巧与外部变量的完美引用

2024-02-13 02:35:14

问题

在JavaScript中，for循环是一个同步任务，这意味着它将一次执行所有迭代。另一方面，reader.onloadend是一个异步任务，这意味着它将在某个时间点在后台执行。这可能导致一个问题，即当异步回调引用外部变量时，始终是循环最后一次值。

解决方案

闭包

闭包是一种创建内部函数的方式，该内部函数可以访问其创建函数的变量。这使得我们可以在for循环中使用闭包来捕获每个迭代的变量值。

for (let i = 0; i < 10; i++) {
  (function(i) {
    reader.onloadend = function() {
      console.log(i);
    };
  })(i);
}

箭头函数

箭头函数是ES6中引入的一种新函数语法。箭头函数没有自己的this，并且它们总是使用其创建函数的this关键字。这使得我们可以在for循环中使用箭头函数来捕获每个迭代的变量值。

for (let i = 0; i < 10; i++) {
  reader.onloadend = () => {
    console.log(i);
  };
}

立即执行函数

立即执行函数(IIFE)是一种在函数定义时立即执行该函数的方式。这使得我们可以在for循环中使用IIFE来捕获每个迭代的变量值。

for (let i = 0; i < 10; i++) {
  (function(i) {
    reader.onloadend = function() {
      console.log(i);
    };
  })(i);
}

代码范例

以下是一个代码范例，演示了如何使用闭包来解决JS遍历多个异步回调完美引用外部变量的问题：

const files = ['file1.txt', 'file2.txt', 'file3.txt'];

for (let i = 0; i < files.length; i++) {
  (function(i) {
    const reader = new FileReader();

    reader.onloadend = function() {
      console.log(files[i]);
    };

    reader.readAsText(files[i]);
  })(i);
}