Item 64: Use Recursion for Asynchronous Loops
Consider a function that takes an array of URLs and tries to download one at a time until one succeeds. If the API were synchronous, it would be easy to implement with a loop:
function downloadOneSync(urls) { for (var i = 0, n = urls.length; i < n; i++) { try { return downloadSync(urls[i]); } catch (e) { } } throw new Error("all downloads failed"); }
But this approach won’t work for downloadOneAsync, because we can’t suspend a loop and resume it in a callback. If we tried using a loop, it would initiate all of the downloads rather than waiting for one to continue before trying the next:
function downloadOneAsync(urls, onsuccess, onerror) { for (var i = 0, n = urls.length; i < n; i++) { downloadAsync(urls[i], onsuccess, function(error) { // ? }); // loop continues } throw new Error("all downloads failed"); }
So we need to implement something that acts like a loop, but that doesn’t continue executing until we explicitly say so. The solution is to implement the loop as a function, so we can decide when to start each iteration:
function downloadOneAsync(urls, onsuccess, onfailure) { var n = urls.length; function tryNextURL(i) { if (i >= n) { onfailure("all downloads failed"); return; } downloadAsync(urls[i], onsuccess, function() { tryNextURL(i + 1); }); } tryNextURL(0); }
The local tryNextURL function is recursive: Its implementation involves
a call to itself. Now, in typical JavaScript environments, a recursive
function that calls itself synchronously can fail after too many calls
to itself. For example, this simple recursive function tries to call itself
100,000 times, but in most JavaScript environments it fails with a
runtime error:
function countdown(n) { if (n === 0) { return "done"; } else { return countdown(n - 1); } } countdown(100000); // error: maximum call stack size exceeded
So how could the recursive downloadOneAsync be safe if countdown explodes when n is too large? To answer this, let’s take a small detour and unpack the error message provided by countdown.
JavaScript environments usually reserve a fixed amount of space in
memory, known as the call stack, to keep track of what to do next after
returning from function calls. Imagine executing this little program:
function negative(x) { return abs(x) * -1; } function abs(x) { return Math.abs(x); } console.log(negative(42));
At the point in the application where Math.abs is called with the argument 42, there are several other function calls in progress, each waiting for another to return. Figure 7.2 illustrates the call stack at this point. At the point of each function call, the bullet symbol (•) depicts the place in the program where a function call has occurred and where that call will return to when it finishes. Like the traditional stack data structure, this information follows a “last-in, first-out” protocol: The most recent function call that pushes information onto the stack (represented as the bottommost frame of the stack) will be the first to pop back off the stack. When Math.abs finishes, it returns to the abs function, which returns to the negative function, which in turn returns to the outermost script.
When a program is in the middle of too many function calls, it can run
out of stack space, resulting in a thrown exception. This condition is
known as stack overflow. In our example, calling countdown(100000)
requires countdown to call itself 100,000 times, each time pushing
another stack frame, as shown in Figure 7.3. The amount of space
required to store so many stack frames exhausts the space allocated
by most JavaScript environments, leading to a runtime error.
Now take another look at downloadOneAsync. Unlike countdown, which
can’t return until the recursive call returns, downloadOneAsync only
calls itself from within an asynchronous callback. Remember that
asynchronous APIs return immediately—before their callbacks are
invoked. So downloadOneAsync returns, causing its stack frame to be
popped off of the call stack, before any recursive call causes a new
stack frame to be pushed back on the stack. (In fact, the callback is
always invoked in a separate turn of the event loop, and each turn of
the event loop invokes its event handler with the call stack initially
empty.) So downloadOneAsync never starts eating up call stack space, no matter how many iterations it requires.
Things to Remember
✦ Loops cannot be asynchronous.
✦ Use recursive functions to perform iterations in separate turns of the event loop.
✦ Recursion performed in separate turns of the event loop does not overflow the call stack.
文章来源于：Effective+Javascript编写高质量JavaScript代码的68个有效方法 英文版