Home > Developer > JavaScript
By using JavaScript, you can execute code after a set interval, rather than executing it immediately after the function is called. As we call it the timing event, the following is a detailed explanation of the JavaScript timer event
It is easy to use timing events in JAVASCRITP, and two key methods are: settimeout () some time in the future to execute code cleartimeout () Cancel settimeout () settimeout () syntax code such as Under: The Var t=settimeout (JavaScript statements, milliseconds) settimeout () method returns a value. In the above statement, the value is stored in a variable named T. If you want to cancel this settimeout (), you can use the variable name to specify it. The first parameter of settimeout () is a string containing JavaScript statements. This statement may be such as "alert (' 5 seconds! ')", or a call to a function, such as alertmsg (). The second parameter indicates how many milliseconds from the current to execute the first parameter. Tip: 1000 milliseconds equals one second. When the button in the following example is clicked, a cue box pops up after 5 seconds. Code as follows: <html> <head> <script type= "Text/javascript" > Function timedmsg () { var t= SetTimeout ("Alert (' 5 seconds! ')", 5000) } </script> </head> <body> <form> < Input type= "button" value= "Display timed alertbox!" onclick= "timedmsg ()" > </form> </body> </html> Instance-Infinite loop to create a timer that runs in an infinite loop, we need to write a function to call itself. In the following example, when the button is clicked, the input field starts counting from 0. Code as follows: <html> <head> <script type= "Text/javascript" > var c=0var t function timedcount () { document.getelementbyid (' txt '). Value=c c=c+1 t=settimeout (" Timedcount () ", 1000) } </script> </head> <body> <form> <input type=" button " Value= "Start count!" onclick= "Timedcount ()" > <input type= "text" id= "TXT" > </form> </body> & lt;/html> cleartimeout () syntax code as follows: Cleartimeout (settimeout_variable) instance The example below is similar to the example of the infinite loop above. The only difference is that now we have added a "Stop count!" button to stop this counter: code as follows: <html> <head> <script type= "text/ JavaScript "> var c=0 var t function Timedcount () { document.getelementbyid (' txt '). Value=c c= C+1 t=settimeout ("Timedcount ()", 1000) } function Stopcount () { cleartimeout (t) lt;/script> </head> <body> <form> <input type= "button" value= "Start count!" onclick= " Timedcount () "> <input type=" text"id=" txt > <input type= "button" value= "Stop count!" onclick= "Stopcount ()" > </form> </body> </ html> Two other important methods: The code is as follows: SetInterval () setinterval ()-Executes a function, over and over again, at The specified time intervals function is to loop through a method, syntax in the specified interval: code as follows: Window.setinterval ("JavaScript function", milliseconds); NOTE: The first parameter must be a function, and the second parameter is the interval between the execution of the function. Example: code is as follows: <html> <script type= "Text/javascript" > SetInterval (Function () {alert ("Hello")},500 ); </script> </html> NOTE: The above example, the implementation effect is that every 500ms on alert ("Hello"); Another clock: code is as follows: <html> <body> <p id= "Demo" ></p> <script type= "text/ JavaScript "> SetInterval (Function () {MyTimer ()},1000); function mytimer () { var d = new Date (); var T=d.tolocaletimestring (); document.getElementById (' demo ') innerhtml=t; } </script> </body> </html> How to stop, Setinterv Al () method?? Code as follows: Window.clearinterval () syntax: The code is as follows: Window.clearinterval (intervalvariable) code is as follows: the Window.clearinterval () method can be written without the window prefix. To is able to use the Clearinterval () method, your must use a global variable when creating the interval method: &NB Sp Myvar=setinterval ("JavaScript function", milliseconds); Then you are able to stop the execution by calling the Clearinterval () method. Example: code as follows: <html> <body> <p id= "Demo" ></p> <p id= "Demo2" onclick= "s Top () ">stop</p> <script type=" Text/javascript "> var temp=setinterval (function () {MyTimer ()},1000); function mytimer () {   var d = new Date (); var t=d.tolocaletimestring (); document.getElementById (' demo ') innerhtml=t; } function Stop () { <html> <body> <p id= "Demo" ></p> <p Id= "Demo2" onclick= "Stop ()" >stop</p> <script type= "Text/javascript" > var temp=setinterval (function () {MyTimer ()},1000); function mytimer () { var d = new Date (); var t=d.tolocaletimestring (); document.getElementById (' demo ') innerhtml=t; } function Stop () { clearinterval (temp);} </script> </bod y> </html> } </script> </body>;/html> 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
