The timer function in JS (Settimeout,cleartimeout,setinterval,clearinterval detailed)

Source: Internet
Author: User

Set the timer to execute the specified code after a period of time, the difference between setTimeout and setinterval is that the code specified by the SetTimeout function executes only once method one: Window.settimeout ("alert (' OK ')", 5000 ); Method Two: Window.settimeout (function () {alert ("OK");}, 5000); Method Three: Function Showalert () {alert ("OK");} window.settimeout (Showalert, 5000); Cleartimeout Clears the Timer function Showalert () {alert ("OK") of setTimeout functions set;} var tt = Window.settimeout (Showalert, 5000); Window.cleartimeout (TT); 1.settimeout,cleartimeout: Set pause using the SetTimeout () method of the Window object. The method accepts two parameters, the code to execute, and the number of milliseconds to wait before executing it (1/1000 seconds). The first argument can be a code string (the same as the parameters of the eval () function), or it can be a pointer to a function. For example, the following code displays a warning after 1 seconds: setTimeout ("alert (' Hello world! ')", 1000); SetTimeout (function () {alert (' Hello world! ');},1000); Of course, you can also refer to previously defined functions: function SayHelloWorld () {alert ("Hello world!"),} setTimeout (sayhelloworld,1000); When you call settimeout (), it creates a numeric pause ID similar to the process ID in the operating system. The pause ID is essentially the process ID to defer, and after you call SetTimeout (), you should not execute its code again. To cancel a pause that has not yet been performed, call the Cleartimeout () method and pass the pause ID to it: var Itimeoutid = setTimeout ("alert (' Hello world! ')", 1000); alert (Itimeoutid); Cleartimeout (Itimeoutid); Among them, ItimeouThe tId is a string of numbers, such as the Itimeoutid that the code above has typed. You might ask, "Why do you define a pause and then cancel it before executing it?" "Consider tooltips that are visible in most applications. When you move the mouse over a button, stay for a while, waiting for a yellow text box to prompt the function of the button. If you just briefly put the mouse on the button and then quickly move it to another button, the ToolTip for the first button is not displayed, which is why you want to cancel it before executing the pause code. Because you only want to wait for a specified amount of time before executing the code. If the user's action produces a different result, the pause is canceled. 2.setinterval,clearinterval Setup interval interval is similar to how a pause is run, except that it repeats the specified code once every specified period of time. You can call the SetInterval () method to set the time interval, which has the same parameters as settimeout (), which is the number of milliseconds to wait between executing the code and executing each execution. For example: SetInterval ("alert (' Hello world! ')", 1000); SetInterval (function () {alert ("Hello world!");},1000); function SayHelloWorld () {alert ("Hello world!");} setinterval (sayhelloworld,1000); In addition, like settimeout (), the SetInterval () method also creates a time interval ID to identify the code to execute. The Clearinterval () method can prevent the code from executing again with this ID. Obviously. This is more important when using the time interval, because if the interval is not canceled, it is executed until the page is unloaded. The following is a common example of time interval usage: var iNum = 0; var iMax = 100; var iintervalid = null; function Incnum () {inum++; if (iNum = = IMax) {clearinterval (iintervalid);}} iintervalid = SetInterval (Incnum, 500); In this code, the number inum is incremented every 500 milliseconds until it reaches the maximum value (IMax), at which time the interval is cleared. You can also do this with a pause, so that you do not have to track the ID of the interval, the code is as follows: var iNum = 0; var iMax = 100; function Incnum () {inum++; if (iNum! = IMax) {setTimeout (incnum,500);}} setTimeout (incnum,500); This code uses a link pause, that is, the code page executed by settimeout () calls settimeout (). If the inum is not equal to IMax after an incremental operation, the settimeout () method is called. You do not have to track the pause ID, and you do not have to clear it because the pause ID is destroyed after the code executes. The Clearinterval () method cancels the timeout set by SetInterval (). The parameter of the Clearinterval () method must be the ID value returned by SetInterval (). The example below will call the clock () function every 50 milliseconds. You can also use a button to stop this clock:

Stop interval

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.