了解JavaScript中的递归和替代方法

Shubh 发表于 Dev

舒布

当list以下代码中的数据很大时，为什么我的浏览器速度变慢：

var list = [];

/*
  Creating some huge dummy data
  Interstingly, when I change the value of i from 10000 
  to 100000, the browser hangs(becomes unresponsive)
*/
for(i=0;i<10000;i++){
  list.push(i);

}

/*Recursive function*/
var nextListItem = function() {
    var item = list.pop();

    if (item) {
        console.log(item);
        // process the list item...
        nextListItem();
    }
};
nextListItem(); // Commented this as browser becomes unresponsive.

jsbin

我无法从Google那里找到我的问题的直接答案，因此尽管获得了SO专家的帮助。我以为它与浏览器内存有关，因为我可以看到循环以很高的速度开始，然后慢慢减慢并变得无响应。但不确定为什么吗？

阿迪特·沙

JavaScript没有尾声消除功能。因此，如果您递归遍历列表，则会浪费大量资源。最终，您甚至可能会耗尽堆栈空间。

解决此问题的一种可能的方法是异步调用tail调用，以便main函数在tail调用函数开始执行之前完成执行。这样可以确保堆栈空间不会增加：

var list = [];

for (var i = 0; i < 10000; i++) list.push(i);

var start = new Date;

nextListItem();

function nextListItem() {
    var item = list.pop();

    if (item) {
        console.log(item);
        setTimeout(nextListItem, 0);
    } else console.log(new Date - start);
}

有关更多详细信息，请参见以下问题：

延续和回调之间有什么区别？

编辑：更快的解决方案（由TJ Crowder建议）：

var list = [];

for (var i = 0; i < 10000; i++) list.push(i);

var start = new Date;

nextListItem();

function nextListItem() {
    var item = list.pop();

    if (item) {
        console.log(item);
        if (item % 100) nextListItem();
        else setTimeout(nextListItem, 0);
    } else console.log(new Date - start);
}