超时链接方法答案

【问题标题】：Timeout Chaining Method超时链接方法
【发布时间】：2018-11-09 11:05:51
【问题描述】：

所以我有一个关于链接超时的问题。我在这里有两种方法，我正在决定使用什么。方法 1 肯定更干净，但我不确定它在性能方面是否比其他方法更不准确或更慢？

方法一：

setTimeout(() => {

}, 1 * 60000);

setTimeout(() => {

}, 2 * 60000);

setTimeout(() => {

}, 3 * 60000);

方法二：

setTimeout(() => {
    setTimeout(() => {
        setTimeout(() => {

        }, 1 * 60000);
    }, 1 * 60000);
}, 1 * 60000);

【问题讨论】：

完全出于好奇，你会在哪里应用这个？
将用于倒计时，每个setTimeout内部的逻辑不同（所以不能使用setIntervals）。
推荐方法2...让我运行一些测试看看
就性能而言，这两者非常相似
@hindmost 我有点怀疑.. 在方法 1 中，不是所有超时都会一次（同时）调用吗？与方法2相比？

标签： javascript timeout settimeout

【解决方案1】：

我的测试表明方法 2 更快。我重复了大约 10 次测试。我使用了 Chrome 性能开发工具。

我用过这段代码：

function runFirst() {
  setTimeout(() => {
    console.log(1);
  }, 1000);

  setTimeout(() => {
    console.log(2);
  }, 2 * 1000);
}

function runSecond() {
  setTimeout(() => {
    console.log(3);

    setTimeout(() => {
      console.log(4);
    }, 1000);
  }, 1000);
}

但是，这些差异确实很小。我建议使用可读性更好的代码（方法 1）。

【讨论】：

【解决方案2】：

方法 2 更快。这是我测试的代码：Benchmark

// function1
function func1() {
  setTimeout(() => { }, 1 * 60000);          
  setTimeout(() => { }, 2 * 60000);  
  setTimeout(() => { }, 3 * 60000);
  return 'done'
}

func1()

// function2
function func2() {
  setTimeout(() => {
    setTimeout(() => {
        setTimeout(() => { }, 1 * 60000);
    }, 1 * 60000);
  }, 1 * 60000);
  return 'done';
}

func2()

Here 是results

【讨论】：