JS循环内等待|极客笔记

JS循环内等待

在编写JavaScript代码时，我们经常会遇到需要在循环内执行异步操作并等待操作完成后再继续下一次循环的情况。然而，由于JavaScript是单线程执行的语言，循环内的异步操作会导致循环瞬间执行完毕，无法等待异步操作完成。本文将详细介绍在JS循环内等待异步操作完成的几种常见方法，并分析它们的优缺点。

使用Promise对象

Promise是ES6新增的异步编程解决方案，可以很好地处理异步操作。我们可以利用Promise来实现在循环内等待异步操作完成的功能。下面是一个简单的示例代码：

function asyncOperation(data) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(data);
        }, 1000);
    });
}

async function runLoop() {
    for (let i = 0; i < 3; i++) {
        await asyncOperation(i).then((res) => {
            console.log('异步操作完成，结果为：', res);
        });
    }
}

runLoop();

在这段代码中，我们定义了一个异步操作asyncOperation()，它会在1秒内返回传入的数据。然后我们定义了一个runLoop()函数，其中使用了async/await语法来等待异步操作完成后再继续下一次循环。当我们运行runLoop()函数时，会输出如下结果：

异步操作完成，结果为： 0
异步操作完成，结果为： 1
异步操作完成，结果为： 2

使用Promise对象的方式是比较常见且简洁的，能够很好地处理循环内等待异步操作的需求。

使用回调函数

除了Promise对象，我们也可以通过传递回调函数的方式来处理在循环内等待异步操作完成的情况。下面是一个示例代码：

function asyncOperation(data, callback) {
    setTimeout(() => {
        callback(data);
    }, 1000);
}

function runLoop(callback) {
    for (let i = 0; i < 3; i++) {
        asyncOperation(i, (res) => {
            console.log('异步操作完成，结果为：', res);
            if (i === 2) {
                callback();
            }
        });
    }
}

runLoop(() => {
    console.log('循环内所有异步操作完成！');
});

在这段代码中，我们定义了一个异步操作asyncOperation()，它会在1秒内返回传入的数据，并通过回调函数通知异步操作完成。然后我们定义了一个runLoop()函数，其中通过传递回调函数的方式来等待异步操作完成后再继续下一次循环。当所有循环内的异步操作完成后，会输出如下结果：

异步操作完成，结果为： 0
异步操作完成，结果为： 1
异步操作完成，结果为： 2
循环内所有异步操作完成！

使用回调函数的方式在处理异步操作时需要传递回调函数，使得代码稍显繁琐，但同样可以实现在循环内等待异步操作完成的功能。

使用Generator函数

Generator函数是ES6中新增的一种异步编程解决方案，结合yield关键字可以实现在循环内等待异步操作完成的需求。下面是一个示例代码：

function asyncOperation(data) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(data);
        }, 1000);
    });
}

function* runLoop() {
    for (let i = 0; i < 3; i++) {
        yield asyncOperation(i).then((res) => {
            console.log('异步操作完成，结果为：', res);
        });
    }
}

function execute(generator) {
    const iterator = generator();

    function iterate(iteration) {
        if (iteration.done) {
            console.log('循环内所有异步操作完成！');
            return iteration.value;
        }

        return iteration.value.then((res) => {
            return iterate(iterator.next(res));
        });
    }

    return iterate(iterator.next());
}

execute(runLoop);

在这段代码中，我们定义了一个异步操作asyncOperation()，它会在1秒内返回传入的数据。然后我们定义了一个Generator函数runLoop()，其中使用了yield关键字来等待异步操作完成后再继续下一次循环。最后我们定义了一个execute()函数来执行Generator函数，使得循环内的异步操作可以按顺序执行。当所有循环内的异步操作完成后，会输出如下结果：

异步操作完成，结果为： 0
异步操作完成，结果为： 1
异步操作完成，结果为： 2
循环内所有异步操作完成！

使用Generator函数的方式需要借助执行器函数来执行Generator函数，相对来说代码结构较为复杂，但可以很好地处理循环内等待异步操作的情况。

总结

本文介绍了在JS循环内等待异步操作完成的几种常见方法，包括使用Promise对象、回调函数和Generator函数。每种方法都有其优缺点，可以根据具体需求选择合适的方式来处理循环内的异步操作。在实际编程中，我们可以根据具体情况灵活运用这些方法，使得代码更加具有可读性和可维护性。

JS循环内等待