Javascript-如何确保（递归）函数调用上的控制流

Question

I have written this recursive function and it did not at all behave like expected. So in debugging I found out that JS skips not only over the recursive calls but also over the function entirely and continues execution, then runs the function calls when it sees fit, thereby messing up the entire order of the list.
Can I somehow make it not do that? I have commented the code for further explanation.

listFileSystem: function () {
    var htmlString = '<ul id="file-system-list"';
    var addFileEntry = function (fs) {
        var reader = fs.createReader();
        reader.readEntries(
                function (entries) {
                    entries.forEach(function (entry) {
                        if (entry.isDirectory === true) {
                            htmlString +=
                                    '<li>'
                                    + '<h2>' + entry.fullPath + '</h2>'
                                    + '<ul>'
                                    ;
                            // here is the recursive call that's 'skipped'
                            // and performed some random time later
                            // resulting in all the recursive calls 
                            // returning in random order
                            addFileEntry(entry);
                            htmlString += '</ul></li>';
                        } else {
                            htmlString +=
                                    '<li><h3>' + entry.fullPath + "</h3></li>";
                        }
                    });
                }
        );
    };
    // this function too is skipped, and then performed later, resulting
    // in the <ul> being closed instantly and appended as such
    // (since the callback here calls the list-building function)
    // in Debugging however it seems like I can just wait until this
    // function has executed and control flow at this point then is sane
    window.resolveLocalFileSystemURL(cordova.file.applicationDirectory,
    addFileEntry);

    htmlString += '</ul>';
    $('#file-cont').append(htmlString);

}

Answer 1

Recursion and asynchrony are two great tools of a developer, unfortunately they don't like each other for a fundamental reason: recursion uses the execution stack to create the structure of the returned object, whereas javascript's asynchronous mechanism purposefully lets the current iteration of the execution stack run its course before it executes the asynchronous operation. In essence, a callback is the asynchronous version of a return address of an execution stack frame's current function. You see what I mean?

So we like recursion because the execution engines takes care of the structure of our response for us, but we like asynchrony because the filesystem is slow and we don't want to hang up execution.

So how do we force a square peg into a round hole? We can keep a pretend recursion level that will act as the counter that tells us when the recursion is complete. Here's my take on it, but it's for NodeJS:

const fs = require('fs');

//These keep track of the recursion.
var recurseLevel = 0;
var paths = [];

function AsyncRecurse(path) {
  recurseLevel += 1;
  fs.readdir(path, createReadDirCallback(path));
}

//Because the callback of fs.readdir doesn't include the state I need (the current path we're investigating) I have to create a callback and pass the path by closure.
function createReadDirCallback(path) {
  return function (err, files) {
    if (err) {
      throw 'RIP';
    }
    files.forEach(file => {
      const fullPath = path + '\\' + file;
      paths.push(fullPath);
      if (fs.statSync(fullPath).isDirectory()) {
        AsyncRecurse(fullPath);
      }
    });
    recurseLevel -= 1;
    if (recurseLevel == 0) {
      //Only when I know for a fact all the recursion is complete can I confidently work with the results. This is the root of your problem: you start working with the result of your recursion long before it is done.
      finalCallback(paths);
    }
  }
}

function finalCallback(paths) {
  var html = '<ul>';
  paths.sort();
  paths.forEach(path => {
    //Build your html here synchronously.
  });
  //Your html is ready!
  console.log(paths);
}

AsyncRecurse(somePath);

Here we see that I keep track of the 'final return address' of the recursion and also the current level of recursion. Essentially I'm manually doing the recursion bits while I let javascript run each asynchronous call one after the other.

Unfortunately, if we want the filesystem to act as fast as it can, then we're gonna have to bombard it with requests and receive the response in an unorganized way. This is why I have to sort all the responses at the end.

You can probably simplify this solution a lot using promises and promisify. Although this is pretty fun to do, in essence what you are doing is map-reduce , so I suggest reading up and implementing that instead.