在返回承诺的函数中调用递归回调

Question

我有一个将节点附加到 dom 的函数，如果节点是具有“src”属性的脚本标签，它将为“load”事件设置一个事件监听器，并且回调是相同的函数，所以当 js标签将完成执行相同的函数将被再次调用并继续在它左边的位置添加节点（使用文档片段） 伪代码示例：

function appender(){// i'm calling the function with bind so 'this' is my object
while(documentfragment.children.length > 0){
if(scriptwithsrc){
node.addeventlistener("load",appender.bind(this));
parentnode.appendchild(node);
return;
}
//if its not a script tag than just append the node
parentnode.appendchild(node);

return Promise.resolve();

现在我有了另一个函数，即执行这个函数的“主”函数。 在appender func 完成后，我正在使用“then”继续执行。 伪代码示例：

let appenderBinder = appender.bind(Myobject);
Myobject.fragment = fragment1;
appenderBinder().then(() => {
//first execution for fragment1 is over lets continue to fragment2
//we call it again but change our object before that
Myobject.fragment = fragment2;
appenderBinder().then(() => {
//some more code
})})

问题在于，如果片段包含带有 src 的脚本标记，则该函数只会返回；并且不返回承诺，所以我得到了

"Cannot read property 'then' of undefined",

但是我需要使用 return 来退出函数并等待回调再次执行它并继续从同一个位置追加，并且只有在它完成追加每个节点之后，promise 才会返回并且 ".then ()”应该被执行。 有什么想法吗？

Answer 1

取自 mozzila 的 MDN：

Promise 对象是使用 new 关键字及其构造函数创建的。此构造函数将一个函数作为其参数，称为“执行器函数”。这个函数应该有两个函数作为参数。当异步任务成功完成并将任务结果作为值返回时，将调用这些函数中的第一个 (resolve)。第二个（reject）在任务失败时调用，并返回失败的原因，通常是一个错误对象。

附上此代码示例：

const myFirstPromise = new Promise((resolve, reject) => {
// do something asynchronous which eventually calls either:
//
//   resolve(someValue); // fulfilled
// or
//   reject("failure reason"); // rejected
});

那么这如何适用于您的问题：

如果遇到脚本标记，您想中断承诺链，在这种情况下，您想先等待它加载，然后再继续沿着链向下走。为此，您需要稍微更改一下代码。

if(scriptwithsrc){
  node.addeventlistener("load",appender.bind(this));
  parentnode.appendchild(node);
  return; //This line here is the problem
}

上面的代码取自您的帖子并且正在同步运行，而您正在做的是，您没有返回任何值。由于您不返回承诺，因此您的函数不能在 then-able 承诺链中使用。你需要做的是：

if(scriptwithsrc){
  let loadingDone = new Promise(function(res, rej){
    node.addEventListener("load", res)
    parentnode.appendchild(node)
  }
  return loadingDone; // This line returns the promise as usual
}
else{
  parentnode.appendchild(node)
  return Promise.resolve() //And so does this line
}

一旦脚本标签加载，它将触发res 函数，该函数将解决承诺并且您的链将继续。在这种特殊情况下，mozzila 代码示例的 something asynchronous 部分指的是脚本标签的加载。

编辑：由于最初的帖子不是很清楚，后来在 cmets 中得到了澄清，因此链需要从它在当前片段中停止的位置继续，因此根据请求添加了一个工作示例来反映这一点.

工作示例：

function appender(arg) {
    let i;
    for (i = 0; i < arg.length; i++) {
        if (arg[i].script) {
            let chainedPromise;
            let pauseProm = new Promise(function (res, rej) {
                setTimeout(function () {
                    console.log('Appended element: ', arg[i].name);
                    res();
                }, 2000); //to mimic script load;
            });
            let j;
            let newChain = [];
            for (j = i + 1; j < arg.length; j++) {
                newChain.push(arg[j]);
            }
            chainedPromise = pauseProm.then(function () {
                return appender(newChain)
            });
            return chainedPromise;
        } else
            console.log('Appended element: ', arg[i].name);
    }
    return Promise.resolve();
}

function Main() {
    appender([
        {name: '1', script: false},
        {name: '2', script: false},
        {name: '3', script: true}
    ]).then(function () {
        appender([
            {name: '4', script: false},
            {name: '5', script: false},
            {name: '6', script: true},
            {name: '7', script: true}
        ]).then(function () {
            appender([
                {name: '8', script: false},
                {name: '9', script: true},
                {name: '10', script: false},
                {name: '11', script: true},
                {name: '12', script: true}
            ]).then(function () {
                console.log('done')
            });
        });
    });
}
Main();

Answer 2

只有在它完成附加每个节点之后，promise 才会返回

不，您需要立即创建并返回承诺。当您完成附加所有节点时，应履行承诺。所以你会写

function appender() {
  if (documentfragment.children.length > 0){
    if (scriptwithsrc) {
      const promise = new Promise(resolve => {
//                    ^^^^^^^^^^^
        node.addeventlistener("load", resolve);
//                                    ^^^^^^^
        parentnode.appendchild(node);
      });
      return promise.then(appender.bind(this));
//           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    } else { // its not a script tag then just append the node
      parentnode.appendchild(node);
      return appender.call(this); // recurse
    }
  } else {
    return Promise.resolve();
  }
}