setInterval(). They add timed tasks to the task queue.
setTimeout function is used to specify how many milliseconds after a certain function or a certain piece of code will be executed. It returns an integer that represents the number of the timer, which can be used to cancel the timer in the future.
If the second parameter of
setTimeout is omitted, it defaults to 0.
setTimeout(f); // Same as setTimeout(f, 0);
In addition to the first two parameters,
setTimeout also allows more parameters. They will be passed into the postponed function (callback function) in turn.
The usage of
setInterval function is exactly the same as
setTimeout, the only difference is that
setInterval specifies a certain task every other period The time is executed once, that is, an unlimited number of timing executions.
setInterval What is specified is the interval between "start execution", and does not consider the time consumed by each task execution itself. So in fact, the interval between two executions will be less than the specified time. For example,
setInterval specifies to execute once every 100ms, and each execution takes 5ms, then 95ms after the first execution ends, the second execution will start. If a certain execution takes a very long time, such as 105 milliseconds, then after it ends, the next execution will start immediately.
In order to ensure that there is a fixed interval between two executions, you can use
setInterval instead of
setInterval, but after each execution, use
setTimeout to specify the specific time for the next execution.
This writing has a big disadvantage, that is, if the user continuously presses the keys, the
keydown event will be triggered continuously, causing a lot of Ajax communication. This is unnecessary and is likely to cause performance problems. The correct approach should be to set a threshold value that represents the minimum time between two Ajax communications. If a new keydown event occurs within the interval, the Ajax communication will not be triggered and the timing will restart. If the specified time has passed and no new
keydown event occurs, the data will be sent out again.
This approach is called debounce (anti-shake). Assuming that the interval between two Ajax communications should not be less than 2500 milliseconds, the above code can be rewritten as follows.
setTimeout of the above code specifies to run a task after 100 milliseconds. However, if the following
veryLongTask function (synchronous task) runs for a very long time and cannot be completed after 100 milliseconds, then the delayed
someTask can only wait and wait until the end of the
veryLongTask run before it’s its turn carried out.
Let's look at another example of
Another example of using this technique is the processing of code highlighting. If the code block is large and one-time processing may cause a lot of pressure on performance, then divide it into small blocks and process one block at a time, for example, write it as
setTimeout(highlightNext, 50), performance pressure will be Lighten up.