Detailed explanation and examples of JavaScript timer_javascript skills

Setting the delay in JS:
Using SetInterval is very similar to setting the delay function setTimeout. setTimeout is used to delay for a period of time before performing an operation.
setTimeout("function",time) sets a timeout object
setInterval("function",time) sets a timeout object
SetInterval is automatically repeated, and setTimeout will not repeat.
clearTimeout(object) clears the setTimeout object
clearInterval(object) clears the setInterval object
Use a timer to implement delayed execution or repeated execution of JavaScript
The window object provides two methods To achieve the effect of the timer, they are window.setTimeout() and window.setInterval respectively. The former can make a piece of code run after a specified time; while the latter can make a piece of code run once every specified time. Their prototypes are as follows:
window.setTimeout(expression,milliseconds);
window.setInterval(expression,milliseconds);
Among them, expression can be a piece of code enclosed in quotation marks, or it can be a function name, the system will automatically call the function at the specified time. When using the function name as the call handle, it cannot take any parameters; when using a string, you can write the parameters to be passed in it. The second parameter of the two methods is milliseconds, which represents the number of milliseconds for delay or repeated execution. The two methods are introduced below.
1． window.setTimeout method
This method can delay the execution of a function, for example:

Copy code The code is as follows:

This code will cause the page to open for 5 seconds After a few seconds the dialog box "hello" is displayed. The last sentence can also be written as:

Copy code The code is as follows:

window.setTimeout( "hello()",5000);

Readers can appreciate their differences. This property also exists in the window.setInterval method.
If you cancel the delayed execution before the delay period is reached, you can use the window.clearTimeout(timeoutId) method, which receives an id representing a timer. This id is returned by the setTimeout method, for example:

Copy code The code is as follows:

< ;script language="JavaScript" type="text/javascript">

< /script>

In this way, if you want to cancel the display, you only need to click on any part of the page, and the window.clearTimeout method will be executed, causing the timeout operation to be cancelled.
2． window.setInterval method
This method causes a function to be called every fixed time and is a very common method. If you want to cancel scheduled execution, similar to the clearTimeout method, you can call the window.clearInterval method. The clearInterval method also receives a value returned by the setInterval method as a parameter. For example:

Copy code The code is as follows:

//Define a call that is executed repeatedly
var id=window.setInterval("somefunction",10000);
//Cancel scheduled execution
window.clearInterval(id);

The above code is only used to illustrate how Cancel a scheduled execution. In fact, the setInterval method needs to be used on many occasions. Below we will design a stopwatch to introduce the use of the setInterval function: the stopwatch will include two buttons and a text box for displaying the time. When the start button is clicked, the timing starts, and the minimum unit is 0.01 seconds. Clicking the button again will stop the timing, and the text box displays the elapsed time. Another button is used to reset the current time to zero. The implementation code is as follows:

Copy code The code is as follows:

7.4.3 Pass to timer call Parameters
Whether it is window.setTimeout or window.setInterval, you cannot take parameters when using the function name as the calling handle. In many cases, you must take parameters, so you need to find a way to solve it. For example, for the function hello(_name), it is used to display the welcome message for the user name:




Copy the code

The code is as follows:

var username = "jack";
// Display welcome information according to the username

Function Hello (_name) { Alert ("Hello," _Name); } At this time, it is not feasible to use the following statement to delay the execution of the hello function for 3 seconds:

Copy code


The code is as follows:

window.setTimeout(hello(userName),3000);

This will make the hello function execute immediately and return the value As the call handle is passed to the setTimeout function, the result is not what the program needs. The desired result can be achieved by using the string form: Copy the code

The code is as follows:

window.setTimeout("hello(userName)",3000);

The string here is a piece of JavaScript code, in which userName represents a variable. But this way of writing is not intuitive enough, and in some cases function names must be used. Here is a little trick to call a function with parameters: Copy code

The code is as follows:

A function _hello is defined here, which is used to receive a parameter and return a function without parameters. The parameters of the external function are used inside this function. , thus calling it without using parameters. In the window.setTimeout function, use _hello(userName) to return a function handle without parameters, thus realizing the parameter passing function.
The window object has two main timing methods, namely setTimeout and setInteval. Their syntax is basically the same, but the completed functions are different.
The setTimeout method is a timing program, that is, what to do after a certain time. Pull it down when you're done.
The setInterval method means to perform an operation repeatedly at a certain interval.
Set delay in JS:

Using SetInterval is very similar to setting the delay function setTimeout. setTimeout is used to delay for a period of time before performing an operation.
setTimeout("function",time) sets a timeout object
setInterval("function",time) sets a timeout object
SetInterval is automatically repeated, and setTimeout will not repeat.
clearTimeout(object) clears the setTimeout object
clearInterval(object) clears the setInterval object
If you use setTimeout to implement the setInerval function, you need to call yourself regularly in the executing program. . If you want to clear the counter, you need to call different clearing methods according to the method used:
For example:




Copy the code

The code is as follows :tttt=setTimeout('northsnow()',1000); clearTimeout(tttt);

Or:

Copy code

The code is as follows:tttt=setInterval('northsnow()',1000); clearInteval(tttt) ;

Give an example:

Copy the code

The code is as follows:

Or:

Copy code

The code is as follows: