Home  >  Article  >  Web Front-end  >  Two functions to implement deferred execution or repeated execution of javascript_time and date

Two functions to implement deferred execution or repeated execution of javascript_time and date

WBOY
WBOYOriginal
2016-05-16 19:12:461327browse

The following content is excerpted from "Detailed Explanation of Conquering AJAX Web2.0 Development Technology". I read the book in the library today and thought it was very good, so I hereby excerpt it! Small parts of the content and code have been changed!

The window object provides two methods to achieve the timer effect, namely window.setTimeout() and window.setInterval. 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:

Copy code The code is 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. At the specified time, the system will automatically call This function, when using the function name as the calling handle, cannot take any parameters; when using a string, the parameters to be passed can be written 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:
"hello" will pop up after one second
[Ctrl A Select all Note: If you need to introduce external Js, you need to refresh to execute
]

This code will make the page The dialog "hello" appears after 5 seconds of opening. The last sentence can also be written as:
window.setTimeout("hello()",1000);
Readers can appreciate their differences. This property also exists in the window.setInterval method.
If you want to cancel the delayed execution before the delay period is reached, you can use the window.clearTimeout(timeoutId) method. This method receives an id, which represents a timer. This id is returned by the setTimeout method, for example:

[Ctrl A Select all Note:
If you need to introduce external Js, you need to refresh to execute
]

In this way, if you want to cancel the display , just click any part of the page, the window.clearTimeout method is executed, so that the timeout operation is 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 repeated execution Call
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. 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:
[Ctrl A select all Note: If you need to introduce external Js, you need to refresh to execute ]
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn