An example of javascript setTimeout

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

SetTimeout ()

SetTimeout () is the method of window, but we all skip the top-level object name of window. This is used to set a time. When the time is reached, a specified method will be executed. Let's take a look at the next simple example. This is an example of no practical use, just to demonstrate the setTimeout () syntax.

Definition and usage: the setTimeout () method is used to call a function or computing expression after a specified number of milliseconds.

Syntax: setTimeout (code, millisec)

Parameter: code (required): the JavaScript code string to be executed after the function to be called. Millisec (required): The number of milliseconds to wait before executing the code. Note: setTimeout () is executed only once. If you want to call it multiple times, use setInterval () or let the code itself call setTimeout () again ().

ClearTimeout ()

Let's take a look at clearTimeout (),

ClearTimout () has the following syntax:

ClearTimeout (timeoutID)

To use clearTimeout (), we need to give this setTimout () a name when setting setTimeout (). This name is timeoutID. We call this timeoutID to stop it, this is a custom name, but many people name it timeoutID.

In the following example, set two timeoutID names: meter1 and meter2, respectively, as follows:

TimeoutID required meter1 = setTimeout ("count1 ()", 1000) meter2 = setTimeout ("count2 ()", 1000)

The timeoutID names meter1 and meter2 can be used to specify which setTimeout () is valid when clearTimeout () is set, without disturbing other setTimeout () operations.

The js code is as follows:

/**
* Countdown function
* You need to bind the click event on the button.
* For example: <INPUT contentEditable = false value = send SMS type = button data-cke-pa-onclick = "setInterval ('Countdown (this, 30) ', 1000 ); "data-cke-editable =" 1 ">
* 30 indicates the number of seconds. You can change the number of seconds for countdown.
*/
Function countDown (obj, second ){
// If the number of seconds is greater than 0, the countdown is not over yet
If (second> = 0 ){
// Obtain the text on the default button
If (typeof buttondefadefavalue = 'undefined '){
ButtonDefaultValue = obj. defaultValue;
}
// Set the button to unclickable
Obj. disabled = true;
// The content in the button is displayed in the countdown status.
Obj. value = buttondefadefavalue + '(' + second + ')';
// Minus one time
Second --;
// Repeat the execution one second later
SetTimeout (function () {countDown (obj, second) ;}, 1000 );
// Otherwise, the button is reset to the initial state
} Else {
// Click the button to set the unclickable status
Obj. disabled = false;
// Restore the content in the button to its initial state
Obj. value = buttonDefaultValue;
}
}

The html code is as follows:

<H1>
Js button countdown effect in 30 seconds <Hr/>
<P>
<Input onclick = "countDown (this, 30);" type = "button" value = "Send SMS"/> </p>
<Hr/>
<H3>
Qiongtai blog qttc.net <P>
In the js click event bound to the button & lsquo; 30 & rsquo; indicates the countdown seconds. You can set the seconds for flexible application during binding. Of course, this countdown is only front-end control. If you need more secure measures, you should also make judgments on the server side. </P>

See the clearTimeout () case

<! DOCTYPE html>
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">

<Script>
X = 0
Y = 0
Function count1 ()
{X = x + 1
Document. display1.box1. value = x
Meter1 = setTimeout ("count1 ()", 1000)
}
Function count2 ()
{Y = y + 1
Document. display2.box2. value = y
Meter2 = setTimeout ("count2 ()", 1000)
}
</Script> <Body>
<P> </br>
<Form name = "display1">
<Input type = "text" name = "box1" value = "0" size = 4>
<Input type = button value = "stop timing" onClick = "clearTimeout (meter1)">
<Input type = button value = "continue timing" onClick = "count1 ()">
</Form>
<P>
<Form name = "display2">
<Input type = "text" name = "box2" value = "0" size = 4>
<Input type = button value = "stop timing" onClick = "clearTimeout (meter2)">
<Input type = button value = "continue timing" onClick = "count2 ()">
</Form>

<Script>
Count1 ()
Count2 ()
</Script>
</Body>
</Html>

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

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

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

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

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More