剪头函数导致的死循环

看<<高性能 JavaScript>>这本书的时候，里面有个例子吸引了我，于是我写了个简化版本

function save() {
  var task = [1, 2, 3, 4, 5];

  setTimeout(() => {
    let e = task.shift();
    console.log('e: ', e);

    if (task.length > 0) {
      setTimeout(arguments.callee, 25);
    }
  }, 25);
}

结果和书上执行结果不一样。调用 save 方法一直输出 e: 1

发现原来我习惯性的用了剪头函数，导致 arguments.callee 找到的方法错了。

修改后：

function save(id) {
  var task = [1, 2, 3, 4, 5];

  setTimeout(function() {
    let e = task.shift();
    console.log('e: ', e);

    if (task.length > 0) {
      setTimeout(arguments.callee, 25);
    }
  }, 25);
}

正常输出了

e: 1

e: 2

e: 3

e: 4

e: 5

使用剪头函数导致 setTimeout(arguments.callee, 25); 中 arguments.callee 是 save 方法， 而修改后的代码 arguments.callee 是第一个 setTime 中的回调方法。