在返回promise的函数中调用递归回调

Question

I've got a function that appends nodes to the dom and if the node is a script tag with "src" attribute it will set an eventlistener for the "load" event and the callback is the same function so when the js tag will finish executing the same function will be called again and continue to append the nodes exactly where it left of (using document fragment) pseudo code example:

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();

Now I've got another func the "main" one which executes this func. and I'm using "then" to continue execution after the appender func has finished. pseudo code example:

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
})})

the problem is that if the fragment contains a script tag with src the function will just return; and not return a promise so I'm getting

" Cannot read property 'then' of undefined ",

but I need to use return in order to exit the function and wait for the callback to execute it again and continue appending from the same spot, and only after it finishes appending every node than the promise should return and the ".then()" should be executed. any ideas?

Answer 1

Taken from mozzila's MDN :

A Promise object is created using the new keyword and its constructor. This constructor takes as its argument a function, called the "executor function". This function should take two functions as parameters. The first of these functions (resolve) is called when the asynchronous task completes successfully and returns the results of the task as a value. The second (reject) is called when the task fails, and returns the reason for failure, which is typically an error object.

Accompanied by this code example:

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

So how does this apply to your question:

You want to interrupt a promise chain if you run into a script tag, in which case you want to wait for it to load first, before continuing to go down the chain. In order to do this, you need to change your code a bit.

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

The above code is taken from your post and is being run synchronously, and what you are doing is, you are returning no value. Since you do not return a promise, your function cannot be used in a then-able promise chain. What you need to do instead is this:

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
}

Once the script tag loads, it will trigger the res function which will resolve the promise and your chain will continue. In this particular case the something asynchronous part of the mozzila's code example refers to the loading of your script tag.

EDIT: Since it was not very clear from the initial post, and was later clarified in the comments, the chain needs to continue from whence it stopped in the current fragment, so as per request a working example was added to reflect this.

Working example:

 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

only after it finishes appending every node than the promise should return

No, you will need to create and return the promise immediately. The promise should be fulfilled when you are done appending all nodes. So you would write

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();
  }
}