I have never written a timer, so I copied this code at the beginning
Then I found a big pit after looking for a long time. setTimeout(f, 0) is to put the content at the end of the running queue for execution, because it is an asynchronous operation. If you write some operations to get elements in the same layer of setTimeout, that is, setInterval, you will not be able to get elements.
The following are the knowledge points seen on the Internet, record them
1、
The timer itself does not have the concept of life cycle, it is just a timer, used to perform certain tasks regularly. When the timer reaches the specified time, the corresponding event or callback function will be triggered to perform the corresponding operation.
In JavaScript, the execution sequence of timers is executed according to the event loop mechanism. When the timer reaches the specified time, the corresponding callback function will be added to the task queue, waiting for the next event loop cycle to execute. In the event loop, the execution order of the task queue is first in, first out, that is, the tasks added to the queue first are executed first.
Therefore, the execution order of the timer is interleaved with the execution order of other tasks, and the specific execution order depends on the number of tasks in the task queue and the execution time.
2、
In JavaScript, the update of DOM elements is done in the main thread, and the callback function of the timer is also executed in the main thread. When the callback function of the timer updates the value of the DOM element, the browser does not immediately update the elements on the page, but waits for the current task to be executed before checking whether there are elements that need to be updated.
Specifically, in JavaScript, all tasks are added to the task queue in first-in, first-out order. When the main thread finishes executing the current task, it will take out the next task from the task queue for execution. If there are DOM elements in the queue that need to be updated, the browser will update the elements on the page.
It should be noted that since JavaScript is executed in a single thread, if the current task takes too long to execute, the page will freeze or become unresponsive. Therefore, when updating the value of the DOM element in the timer, you should try to control the time of each execution to avoid occupying the main thread for a long time and affecting the interactive experience of the page. You can consider using technologies such as Web Worker to update the value of DOM elements asynchronously, so as to improve the response speed of the page.
3. If the code is written like this, queryMinutes contains some operations for updating data, and getHeight is to obtain the height of the element, so the element cannot be obtained by writing this way
this.tims = setInterval(() => {
setTimeout(this.queryMinutes(), 0)
this.getHeight() }, 1000 * 7)
}In the timer callback function, the setTimeout function will add this.queryMinutes() to the task queue and execute the task in the next event loop cycle. The this.getHeight() statement is executed synchronously, it will be executed immediately and the height of the element will be obtained.
Since JavaScript is executed by a single thread, each event loop cycle is executed sequentially by the main thread in the order in the task queue. When the timer callback function is executed, the setTimeout function will add this.queryMinutes() to the task queue, and the this.getHeight() statement will execute immediately and get the height of the element. However, since the layout and rendering of the page have not been completed during this event loop cycle, the obtained element height may not be the latest, but the height in the previous event loop cycle.
When the next event loop cycle starts, the main thread will fetch the this.queryMinutes() task from the task queue for execution. When this task is executed, the layout and rendering of the page have been completed. At this time, call the this.getHeight() method to obtain the height of the element, and the latest height can be obtained.
Therefore, when obtaining the element height in a timer, it should be obtained in an asynchronous task to ensure that the latest element height is obtained. You can use functions such as setTimeout or requestAnimationFrame to delay the time to get the element height, so as to ensure that the latest element height is obtained.