Detailed explanation of two common JS delay methods

In JavaScript, we often need to perform delay operations to achieve some specific functions. For example, when displaying animations on web pages or executing asynchronous requests, we need to control the execution time of JS. This article will introduce two common JS delay methods, including setTimeout and setInterval functions.

1. setTimeout function

Using the setTimeout function can execute a function or code fragment after a certain period of time. This function receives two parameters. The first parameter is the function or code fragment to be executed, and the second parameter is the delay time in milliseconds. For example:

setTimeout(function() {
    console.log('Hello World!');
}, 1000);

The above code means printing "Hello World!" to the console after 1 second. We can also write it in the form of an arrow function:

setTimeout(() => console.log('Hello World!'), 1000);

If you want to cancel a setTimeout operation before the delay ends, you can use the clearTimeout function. This function receives a unique identifier of setTimeout as a parameter.

let timeoutId = setTimeout(() => console.log('Hello World!'), 1000);
clearTimeout(timeoutId);

In the above code, we first create a delayed operation through the setTimeout function, store its identifier in the timeoutId variable, and then immediately clear the delayed operation.

2. setInterval function

The setInterval function is similar to the setTimeout function and is also used to implement operation delays. The difference is that the setInterval function will loop and execute a specified function or code fragment at regular intervals until stopped. This function receives two parameters, the first parameter is the function or code fragment to be executed, and the second parameter is the time between two executions, in milliseconds. For example:

setInterval(function() {
    console.log('I am running!');
}, 1000);

The above code means that ‘I am running!’ is output every 1 second.

If you need to stop the setInterval loop from executing a function, you can use the clearInterval function, which receives a unique identifier of setInterval as a parameter.

let intervalId = setInterval(() => console.log('I am running!'), 1000);
clearInterval(intervalId);

In the above code, we first create an operation to be executed in a loop through the setInterval function, store its identifier in the intervalId variable, and then stop the operation immediately.

Summary

The setTimeout and setInterval functions are very common in front-end development. Through them, JS programs can be more accurately controlled and scheduled. During specific implementation, you must pay attention to parameter settings and cancellation of operations using the clearTimeout or clearInterval function to avoid unexpected results. I hope this article can be helpful to JS newbies.

The above is the detailed content of Detailed explanation of two common JS delay methods. For more information, please follow other related articles on the PHP Chinese website!