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

Question

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

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

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

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

您的代码对我来说有点难以阅读。所以这里是替代解决方案：

<script>
  // The data

  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 fns = [first, second, third, second, last];

  // We need hash function to create the identifyer of the function
  function hashCode(str) {
    return Array
      .from(str)
      .reduce((s, c) => Math.imul(31, s) + c.charCodeAt(0) | 0, 0);
  }
  const cache = [];

  function reducer(accumulator, currentFunction) {
    // Take the functon string representation to detect "the same function"
    const hash = hashCode(currentFunction.toString());
    // Process the result of the current function and call the next one.
    // We use "reduceRight" so `accumulator` is the next function in the chain.
    const cb = function (fp, result) {
      console.log(result);
      // Cache the result;
      cache[hash] = result;
      accumulator();
    }
    // Run just a callback if we already have the result of the current function
    return () => cache[hash] ? cb(null, cache[hash]) : currentFunction(cb);
  }

  fns.reduceRight(reducer, () => { })();
</script>

结果：

first()
one
second()
two
third()
three
two
last()
lastCall

如果你根本不想处理缓存的结果，那么直接调用累加器替换回调调用。

return () => cache[hash] ? cb(null, cache[hash]) : currentFunction(cb);

替换为：

return () => cache[hash] ? accumulator() : currentFunction(cb);

结果：

first()
one
second()
two
third()
three
last()
lastCall

没有缓存的解决方案

干净多了：

<script>
  // Use the same data as in the example with cache

  function reducer(accumulator, currentFunction) {
    const cb = function (fp, result) {
      console.log(result);
      accumulator();
    }
    return () => currentFunction(cb)
  }

  fns.reduceRight(reducer, () => { })();
</script>

结果：

first()
one
second()
two
third()
three
second()
two
last()
lastCall

Answer 2

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

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

链条断了。

你想要的是这样的：

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

替代实现

嵌套函数实现的一个问题是，由于多个嵌套作用域（以及同时处理多个函数（r、f、k、cb）而难以推理.

一个更简单的方法是，而不是尝试以编程方式构建回调地狱，您可以使用队列来代替（这就是 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 等。

Answer 3

我猜想通过基于缓存的实现，您可以通过直接k() 调用省略双步。

return;
if (cache[f]) {
  return;
  // f(function(e, x) {
  //   e ? cb(e) : k(x);
  // });

想法：

if (cache[f]) {
  return k(function(e, x) {
    return e ? cb(e) : k(x);
  });