JS 异步队列

Question

有三个执行函数，如何通过一个异步队列执行函数，使其能按照参数顺序依次输出?

function f1() {
  setTimeout(function() {
    console.log('f1')
  }, 300)
}

function f2() {
  setTimeout(function() {
    console.log('f2')
  }, 100)
}

function f3() {
  setTimeout(function() {
    console.log('f3')
  }, 200)
}

function doWork(list) {
    // TODO
}

doWork([f1, f2, f3])

// 期待结果： f1 f2 f3

Answer 1

function f1() {
              return new Promise(function (resolve, reject) {
                setTimeout(function () {
                      resolve('f1');
                }, 300);
              });
        };
        // 异步函数b
        function f2(data) {
              return new Promise(function (resolve, reject) {
                setTimeout(function () {
                     resolve(data + 'f2');
                }, 100);
              });
        };
        // 异步函数c
        function f3 (data) {
              return new Promise(function (resolve, reject) {
                setTimeout(function () {
                      resolve(data + 'f3');
                }, 200);
              });
        };
        f1().then(function (data) {
            return f2(data);
        }).then(function (data) {
            return f3(data);
        }).then(function (data) {
            console.log(data);// abc
        });

Answer 2

function f(v) {
  return new Promise((resolve, reject) => {
    setTimeout(function() {
      resolve(v)
    }, 300)
  })
}


f1 = f('f1')
f2 = f('f2')
f3 = f('f3')

f1.then((v) => {
  console.log(v)
  return f2
}).then((v) => {
  console.log(v)
  return f3
}).then((v) => {
  console.log(v)
})

依次输出 f1 f2 f3，这是 Promise 最基本的使用，觉得 then 麻烦就使用 async / await:

(async () => {
  var promiseQueue = [f1, f2, f3]
  for (p of promiseQueue) {
    let v = await p
    console.log(v)
  }
})()

Answer 3

借用上面Promise

function doWork(list) {
    // TODO
    return list.reduce((acc, cur) => acc.then(cur));
}

Answer 4

function f1() {
  return new Promise(function (resolve, reject) {
    setTimeout(function () {
          resolve('f1');
    }, 300);
  });
};

function f2(data) {
  return new Promise(function (resolve, reject) {
    setTimeout(function () {
         resolve(data + 'f2');
    }, 100);
  });
};

function f3 (data) {
  return new Promise(function (resolve, reject) {
    setTimeout(function () {
          resolve(data + 'f3');
    }, 200);
  });
};

async doWork() {
    await f1();
    await f2();
    await f3();
}

doWork();

Answer 5

function enque() {
   setTimeout(function() {
     f1();
   }, 0);
   setTimeout(function() {
     f2();
   }, 400);
   setTimeout(function() {
     f3();
   }, 500)
}

笨方法哈