Home > Developer > JavaScript
The rational use of the timer Item23 in JavaScript, javascriptitem23
There are two dedicated functions for timers in javascrui:
1. Countdown timer: timename = setTimeout ("function ();", delaytime );
2. Cyclic Timer: timename = setInterval ("function ();", delaytime );
1. Timer Overview
The window object provides two methods to implement the timer effect, namely window. setTimeout () and window. setInterval. The former allows a piece of code to run after a specified time, while the latter allows a piece of code to run once every time. Their prototype is as follows:
window.setTimeout(expression,milliseconds); window.setInterval(expression,milliseconds);
Expression can be a piece of code enclosed in quotation marks or a function name. at the specified time, the system automatically calls the function, when a function name is used as the call handle, it cannot contain any parameters. When a string is used, you can write the parameters to be passed. The second parameter of the two methods is milliseconds, which indicates the number of milliseconds of delay or repeated execution. The following describes two methods.
SetInterval is similar to setTimeout. SetTimeout is used to perform an operation after a delay period.
SetTimeout ("function", time) sets a timeout object
SetInterval ("function", time) sets a timeout object
SetInterval indicates automatic repetition, and setTimeout does not.
ClearTimeout (object) clears the set setTimeout object
ClearInterval (object) clears the set setInterval object
Use a timer to implement deferred or repeated JavaScript Execution.
2. Specific Use
1. window. setTimeout Method
This method can delay the execution of a function, for example:
function hello(){ alert("hello"); } window.setTimeout(hello,5000);
This code will enable the page to open for 5 seconds and then display the "hello" dialog box ". The last sentence can also be written as follows:
window.setTimeout("hello()",5000);
Readers can understand their differences. They also have such properties in the window. setInterval method.
If the execution is canceled before the delay period expires, you can use the window. clearTimeout (timeoutId) method, which receives an id, indicating a timer. This id is returned by the setTimeout method, for example:
function hello(){ alert("hello"); } var id=window.setTimeout(hello,5000); document.onclick=function(){ window.clearTimeout(id); }
In this way, to cancel the display, you only need to click any part of the page to execute the window. clearTimeout method, so that the timeout operation is canceled.
2. window. setInterval Method
This method is a common method that allows a function to be called at regular intervals. To cancel scheduled execution, call the window. clearInterval method, similar to the clearTimeout method. The clearInterval method also receives the value returned by a setInterval method as a parameter. For example:
// Define a call for repeated invocation var id = window. setInterval ("somefunction", 10000); // cancel the scheduled execution of window. clearInterval (id );
3. Demo small exercises
The above code is only used to describe how to cancel a scheduled execution. In fact, the setInterval method is used in many cases. Next we will design a stopwatch to introduce the purpose of the setInterval function: This stopwatch will contain two buttons and a text box for displaying time. Start timing when you click the start button. The minimum unit is 0.01 seconds. click the button again to stop timing. The text box shows the elapsed time. Another button is used to clear the current time. The implementation code is as follows:
<Html>3. Pass parameters to the timer call
Whether it is window. setTimeout or window. setInterval, parameters cannot be included when using the function name as the call handle. In many cases, parameters must be included, which requires a solution. For example, for the hello (_ name) function, it is used to display the welcome information for the user name:
Var userName = "jack"; // display the welcome information according to the user name function hello (_ name) {alert ("hello," + _ name );}At this time, if you attempt to use the following statement to delay the hello function execution by 3 seconds, it is not feasible:
window.setTimeout(hello(userName),3000);This will enable the hello function to be executed immediately and pass the returned value to the setTimeout function as the call handle. The result is not required by the program. You can use a string to achieve the desired result:
window.setTimeout("hello(userName)",3000);The string here is a piece of JavaScript code, where userName represents a variable. However, this method is not intuitive enough, and function names must be used in some cases. Here is a tips to call a function with parameters:
Var userName = "jack"; // display the welcome information according to the user name function hello (_ name) {alert ("hello," + _ name) ;}// create a function, returns a non-Parameter function _ hello (_ name) {return function () {hello (_ name) ;}} window. setTimeout (_ hello (userName), 3000); </script>A function _ hello is defined here, which is used to receive a parameter and return a function without a parameter. An external function parameter is used inside the function to call it, no parameters are required. In the window. setTimeout function, _ hello (userName) is used to return a function handle without parameters, thus implementing the function of passing parameters.
4. Correctly Understand the timer function
First look at a piece of code
Function display () {alert (hello);} setTimeout ("display ()", 3000); alert ("the first thing you see is me! ")Which code outputs first? The answer is obvious in the program. Why?
Beginners may have misunderstandings about the Javascript timers. They think they are threads. In fact, Javascript is running in a single thread, and the timer is only intended to be executed at a certain time in the future, the specific execution time cannot be guaranteed, because in the lifecycle of the page, other code may be in the process of controlling Javascript at different times. The browser is only responsible for sorting and assigns a code to run at a certain time point.
The following describes the Javascript thread, indicating the javascript process timeline.
In addition to the javascript Execution Process, there is also a code queue that needs to be executed in the next idle time of the process. As the page passes through its lifecycle, the code is added to the peer column in the execution order. For example, when a button is pressed, event processing is added to the queue and executed within the next possible time.
The timer works on the queue. When the specified time passes, the code is inserted. Note that adding to the queue does not mean that it will be executed immediately, but can only be said that it will be executed as soon as possible, set a timer to be executed after Ms. It does not mean that the timer will be executed immediately after Ms. It only means that the timer will be added to the queue after Ms. If the queue is idle at this time point, the code will be executed.
See the following code:
Var btn = document. getElementById ("mybtn"); btn. onclick = function () {setTimeout (function () {document. getElementById ("message "). nodeName = "mymessage"; // other codes}, 250 );}Note that the specified time interval indicates when the timer code is added to the queue, rather than when the code is executed. For details about the process timeline processed by the onclick operator, refer:
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
