关于setInterval定时器的执行和setTimeout的坑

没写过定时器，一开始copy了这样的代码

然后看了好久才发现一个大坑，setTimeout(f,0)是把内容放到运行队列的最后去执行，因为它是异步操作，如果此时在setTimeout的同层也就是setInterval里面写一些获取元素的操作，就获取不到元素了，我目前也不是太懂，菜狗如我暂时不用setTimeout了，直接await this.queryInfo()

以下是在网上看到的知识点，记录下

1、

定时器本身并没有生命周期的概念，它只是一个计时器，用来定时执行某些任务。当定时器到达指定时间时，会触发相应的事件或回调函数，执行相应的操作。

在JavaScript中，定时器的执行顺序是按照事件循环机制来执行的。当定时器到达指定时间时，会将相应的回调函数添加到任务队列中，等待下一个事件循环周期来执行。在事件循环中，任务队列的执行顺序是先进先出，即先添加到队列中的任务先执行。

因此，定时器的执行顺序是与其他任务的执行顺序相互交错的，具体的执行顺序取决于任务队列中的任务数量和执行时间。

2、

在JavaScript中，DOM元素的更新是在主线程中完成的，而定时器的回调函数也是在主线程中执行的。当定时器的回调函数更新了DOM元素的值后，浏览器并不会立即更新页面上的元素，而是等待当前任务执行完毕后，再去检查是否有需要更新的元素。

具体来说，在JavaScript中，所有的任务都是按照先进先出的顺序添加到任务队列中的。当主线程执行完当前任务后，会从任务队列中取出下一个任务执行。如果队列中有需要更新的DOM元素，浏览器就会更新页面上的元素。

需要注意的是，由于JavaScript是单线程执行的，如果当前任务执行时间过长，就会导致页面出现卡顿或者无响应的情况。因此，在定时器中更新DOM元素的值时，应该尽量控制好每次执行的时间，避免长时间占用主线程，影响页面的交互体验。可以考虑使用Web Worker等技术来实现异步更新DOM元素的值，从而提高页面的响应速度。

3、假如是这样写的代码，queryMinutes里面是更新数据的一些操作，getHeight是获取元素高度，这样写是获取不到元素的

this.tims = setInterval(() => { 
            setTimeout(this.queryMinutes(), 0) 
            this.getHeight() }, 1000 * 7)
          }

在定时器回调函数中，setTimeout函数会将this.queryMinutes()添加到任务队列中，并在下一个事件循环周期执行该任务。而this.getHeight()语句则是同步执行的，会立即执行并获取元素的高度。

由于JavaScript是单线程执行的，每个事件循环周期都是由主线程按照任务队列中的顺序依次执行的。当定时器回调函数执行时，setTimeout函数会将this.queryMinutes()添加到任务队列中，而this.getHeight()语句会立即执行并获取元素的高度。但是，由于在此事件循环周期内，页面的布局和渲染还没有完成，因此获取的元素高度可能不是最新的，而是上一个事件循环周期中的高度。

当下一个事件循环周期开始时，主线程会从任务队列中取出this.queryMinutes()任务执行。在执行该任务时，页面的布局和渲染已经完成，此时再调用this.getHeight()方法获取元素的高度，就能够获取到最新的高度了。

因此，在定时器中获取元素高度时，应该在异步任务中获取，以确保获取到的是最新的元素高度。可以使用setTimeout或者requestAnimationFrame等函数来延迟获取元素高度的时间，从而确保获取到的是最新的元素高度。