Javascript模式分解长时间运行的递归函数

我写了一个函数来做类似的事情。这是一个完全在javascript中完成的计算…从你的问题中我看不出你是完全在客户端工作还是什么。

// Break the list up into equal-sized chunks, applying f() to each item of
// the list, writing a %-complete value to the progress span after each
// chunk. Then execute a callback with the resulting data.
var chunkedLoop = function (list, f, progressSpan, callback) {
    var numChunks = 10,
        chunkSize = Math.round(list.length / numChunks),
        chunkedList = [],  // will be a list of lists
        // Concatenated results of all chunks, passed to the callback.
        resultList = [],
        x,  // just a loop variable
        chunkIndex = 0;  // tracks the current chunk across timeouts
    progressSpan.html(0);
    // Splice of chunks of equal size, but allow the last one to be of an
    // arbitrary size, in case numChunks doesn't divide the length of the
    // list evenly.
    for (x = 0; x < numChunks - 1; x += 1) {
        chunkedList.push(list.splice(0, chunkSize));
    }
    chunkedList.push(list);
    // Schedule a series of timeouts, one for each chunk. The browser
    // stops blocking for a moment between each chunk, allowing the screen
    // to update. This is the only way to have progress values reported to
    // the view mid-loop. If it was done in a single loop, execution would
    // block all the way to the end, and the screen would only update once
    // at 100%.
    var chunkFunction = function () {
        setTimeout(function () {
            // Run f on the chunk.
            var chunk = chunkedList[chunkIndex];
            var r = forEach(chunk, f);
            resultList = resultList.concat(r);
            chunkIndex += 1;
            // Update progress on the screen.
            progressSpan.html(Math.round(chunkIndex / numChunks * 100));
            // Schedule the next run, if this isn't the last chunk. If it
            // is the last chunk, execute the callback with the results.
            if (chunkIndex < chunkedList.length) {
                chunkFunction();
            } else if (callback instanceof Function) {
                callback.call(undefined, resultList);
            }
        // There's no reason to delay more than the minimum one
        // millisecond, since the point is just to break up javascript's
        // single-threaded blocking.
        }, 1);
    };
    chunkFunction();
};

对于报告状态，您可以将回调函数传递到递归函数中，并在那里做任何您喜欢的事情(增加计数器，将状态推入页面等)。

还可以考虑将递归算法重写为迭代算法，因为这样会减少内存开销，并且更容易放入其他逻辑(如您提到的取消)

您可以使用setTimeout让JavaScript做其他事情并解除事件循环。这样，即使无限循环也不会阻塞。下面是一个简单的示例:

function isPrime(n) {
    // If n is less than 2 or not an integer then by definition cannot be prime.
    if (n < 2) {
        return false
    }
    if (n != Math.round(n)) {
        return false
    }
    var isPrime = true;
    for (var i = 2; i <= Math.sqrt(n); i++) {
        if (n % i == 0) {
            isPrime = false
        }
    }
    // Finally return whether n is prime or not.
    return isPrime;
}
var cancel = false;
var i = 0;
var primesFound = 0;
var status = $('.status');
var timeout;
function loop4Primes() {
    if (cancel) {
        clearTimeout(timeout);
        return;
    }
    if (isPrime(i++)) primesFound++;
    timeout = setTimeout(loop4Primes, 1);
}
function updateText() {
    status.text(primesFound);
}
var interval = setInterval(updateText, 1000);
$('#start').click(function () {
    loop4Primes();
    $(this).off('click');
});
$('#stop').click(function () {
    clearInterval(interval);
    updateText();
    cancel = true;
});