html2canvas - js setTimeout 执行时机的先后顺序怎么确定？

Question

react 代码中有两个setTimeout，都没有写时间，用来实现等页面渲染完成后再执行，但是通过多次尝试后发现两段逻辑的执行顺序并不绝对，

export default class BarcodeList extends Component {    // 父组件调用,相当于入口函数    showFun=()=>{            this.setState(...)            this.setState(...)            this.setState(...)            setTimeout(()=>{                 //第二部分需要页面渲染完成后执行的逻辑            })    }    inputBarcode=()=>{        setTimeout(()=>{            //第一部分需要页面渲染完成后执行的逻辑        })    }    render() {        this.inputBarcode()            <div>               .....            </div>    }}

我知道写在生命周期钩子中可以确保执行顺序，vue不仅可以写在钩子里，还专门提供了个$nexttack,也可以设置两个很短但不一样长的时间来实现，但我想知道现在的执行顺序为什么不绝对？不是应该是先进先出，谁先脱离线程加入任务流，最后就谁先被加载执行吗？
是因为前面有多个 setState 导致的吗？求指教

Answer 1

在JavaScript中，setTimeout函数的执行顺序并不是按照它们被添加到任务队列的顺序来的，而是由浏览器的事件循环（Event Loop）来决定的。

当你调用setTimeout时，JavaScript引擎会将这个函数放入任务队列中，等待当前的事件循环迭代结束之后，再从任务队列中取出任务来执行。这个过程是由浏览器的内部机制来控制的，因此并不能保证setTimeout函数的执行顺序。

在你的例子中，由于setTimeout中的代码块是异步执行的，所以它们不会按照你预期的顺序来执行。即使你先调用this.inputBarcode()，也不一定会在this.showFun()之前执行。这是因为setTimeout中的代码块会在当前的事件循环迭代结束之后，由事件循环来决定它们的执行顺序。

如果你需要确保特定的代码块按照特定的顺序执行，你可以使用回调函数或者Promise来实现。你可以在第一个setTimeout的回调函数中调用第二个setTimeout，这样就可以保证第二个setTimeout中的代码块会在第一个之后执行。

下面是一个使用回调函数的示例：

export default class BarcodeList extends Component {  // 父组件调用,相当于入口函数  showFun = () => {    this.setState(...);    this.setState(...);    this.setState(...);    setTimeout(() => {      // 第二部分需要页面渲染完成后执行的逻辑      this.inputBarcode();    });  }  inputBarcode = () => {    setTimeout(() => {      // 第一部分需要页面渲染完成后执行的逻辑    });  }  render() {    this.showFun();    return (      <div>        ...      </div>    );  }}

在这个示例中，当showFun方法被调用时，它会设置三个状态，然后使用setTimeout将inputBarcode方法放入任务队列中。当inputBarcode方法被调用时，它也会使用setTimeout将一个空的任务放入任务队列中。由于回调函数的使用，可以保证inputBarcode方法会在showFun方法之后执行。