JavaScript:逐一执行异步功能 [英] JavaScript: execute async function one by one

问题描述

我有一个简单的异步" JS功能:

I have a simple "async" JS function:

function asyncFunc(i) {
    setTimeout(function () {
        console.log(i);
    }, 1000);
}

如果我想在for循环中执行此asyncFunc 5次，即每秒记录1-5次，则总共花费5秒.

if I want to execute this asyncFunc 5 times in a for loop, i.e. log 1 - 5 per second, and totally costs 5 seconds.

1

2

3

4

5

我知道jQuery的when().done()可以做到这一点，但是如果我在没有第三方JS库的环境中，实现这一目标的最简单，最优雅的方法是什么?

I know jQuery's when().done() can do that however if I am in a environment with NO 3rd party JS libraries, what is the simplest and elegant way to achieve this?

实际上，例如，我想编写一个接受异步函数数组的util函数，并且该util函数可以一个接一个地执行传入的函数:

Actually for example I want to write a util function which accepts an array of async functions, and this util function can execute passed in functions one by one:

function execAsyncTasks([asyncTask1, asyncTask2, asyncTask3]) {
    asyncTask1();
    // Wait until asyncTask1 finished
    asyncTask2();
    // Wait until asyncTask2 finished
    asyncTask3();
    // Wait until asyncTask3 finished
}

推荐答案

您的所有任务都必须实现某种回调机制，因为这是您将知道异步任务已完成的唯一方法.有了它，您可以执行以下操作:

All your tasks will have to implement some sort of callback mechanism, because that's the only way you'll ever know that an asynchronous task has been completed. Having that, you could do something like:

function executeTasks() {
    var tasks = Array.prototype.concat.apply([], arguments);
    var task = tasks.shift();
    task(function() {
        if(tasks.length > 0)
            executeTasks.apply(this, tasks);
    });
}

executeTasks(t1, t2, t3, t4);

演示

这篇关于JavaScript:逐一执行异步功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！