javascript - 如何处理来自函数数组的重复函数调用？

Question

我正在尝试按顺序执行函数(同步/异步)的以下数组(避免 callbackHell)，实现函数 runCallbacksInSequence(我需要实现自己的函数以了解回调如何工作并避免使用 Async.js)。

这是我目前所拥有的。函数 runCallbacksInSequence 运行良好，直到它多次获得相同的 callback。它停止并且不继续执行下一个回调。理想情况下，如果它多次获得相同的 callback，则不应执行第二次并继续下一个 callback。

如果您有任何想法，请告诉我我做错了什么以及如何解决。- 没有 promise 和异步/等待

function first(cb) {
  setTimeout(function() {
    console.log('first()');
    cb(null, 'one');
  }, 0);
}

function second(cb) {
  setTimeout(function() {
    console.log('second()');
    cb(null, 'two');
  }, 100);
}

function third(cb) {
  setTimeout(function() {
    console.log('third()');
    cb(null, 'three');
  }, 0);
}

function last(cb) {
  console.log('last()');
  cb(null, 'lastCall');
}

const cache = {};

function runCallbacksInSequence(fns, cb) {
  fns.reduce(
    function(r, f) {
      return function(k) {
        return r(function() {
          if (cache[f]) {
            return;
            // f(function(e, x) {
            //   e ? cb(e) : k(x);
            // });
          } else {
            cache[f] = f;
            return f(function(e, x) {
              return e ? cb(e) : k(x);
            });
          }
        });
      };
    },
    function(k) {
      return k();
    }
  )(function(r) {
    return cb(null, r);
  });
}

const fns = [first, second, third, second, last];

runCallbacksInSequence(fns, function(err, results) {
  if (err) return console.log('error: ' + err.message);
  console.log(results);
});

Answer 1

您的函数链接取决于对 k() 的调用。因此在你的缓存逻辑中:

if (cache[f]) {
    return;
} else {
    // ...

链断裂。

你想要的是:

if (cache[f]) {
    return k();
} else {
    // ...

替代实现

嵌套函数实现的一个问题是，由于多个嵌套范围(以及同时处理多个函数(r, f, k, cb).

一个更简单的方法不是尝试以编程方式构建回调 hell ，而是​​可以使用队列(这是 async.js 所做的)。这个想法很简单，pop() 或 shift() 从数组开始运行，直到数组为空:

function runCallbacksInSequence(fns, cb) {
    let result = [];
    let cache = {};

    function loop () {
        if (fns.length > 0) {
            let f = fns.shift(); // remove one function from array

            if (cache[f]) {
                loop(); // skip this round
                return;
            }

            cache[f] = f;
            f(function(err, val) {
                if (!err) {
                    result.push(val); // collect result
                    loop();
                }
                else {
                    // Handle errors however you want.
                    // Here I'm just terminating the sequence:
                    cb(err, result);
                }
            });
        }
        else {
            cb(null, result); // we've collected all the results!!
        }
    }

    loop(); // start the loop
}

如您所见，使用此结构实现任何流逻辑都相当容易。我们可以通过控制跟踪结果的方式以及每次迭代从数组中删除多少函数来轻松实现瀑布、parallelLimit 等功能。