JS timer use (instance explanation)

Author：Eve Cole Update Time：2025-03-16 21:32:01

In JavaScritP, there are two special functions about timers, which are:

1. Countdown timer: timename = settimeout ("function ();", delaytime);

2. Cycling timer: tIMENAME = SETINTERVAL ("Function ();", Delaytime);

The first parameter "function ()" is the action to be executed when the timer is triggered. It can be a function or several functions, and the functions are used ";" separate. For example, if two warning windows are popped up, you can replace "function ();" to

"Alert ('The first warning window!'); Alert ('The second warning window!');"; "Delaytime" is the interval, in milliseconds, that is, fill in "5000 5000 "It means 5 seconds.

The countdown timer trigger an event after the time is arrived, and the circulating timer is to repeatedly trigger the event when the interval is coming.

For example, after you open a page and want to automatically jump to another page interval in a few seconds, you need to use the countdown timer "settimeout (" function (); ", delaytime), and if you want to set a sentence settings The appearance of one word,

You need to use the circular timer "SetInterval (" Function (); ", Delaytime".

To get the focus of the form, the Document.activeElement.id is used. Use if to determine whether the Document.activeElement.id and the ID of the form are the same.

For example: if ("mid" == Document.activeElement.id) {Alert ();}, "MID" is the ID corresponding to the form.

Timer:

Used to specify a certain program after a specific time.

The differences between settimeout and SetInterval in JS, and the Llee method

Settimeout (Expression, Delaytime). After delaytime, it will execute an expression, settimeout in a delay for a period of time, and then perform a certain operation.

settimeout ("function", time) set a timeout object

SetInterval (Expression, Delaytime), each delaytime will execute Expdition. It can often be used to refresh expressions.

SetInterval ("Function" (Time) sets a timeout object

SetInterval is automatically repeated, and settimeout will not be repeated.

Cleartimeout

Clearinterval

Two cases.

Example 1. When the form is triggered or loaded, the word string is output word by word

Copy code code as follows:

<html>

<head>

<Title> Non -Title Document </Title>

var str = "This is the example text for testing";

var seq = 0;

var second = 1000; // interval 1 second

function scroll () {

msg = str.substring (0, seq+1);

document.GetelementByidx_x_x ('word'). Innerhtml = msg;

seq ++;

if (seq> = str.Length) seq = 0;

}

</script>

</head>

</body>

</html>

Example 2. When the focus is in the input box, check the input box information regularly.

Copy code code as follows:

<! Doctype HTML PUBLIC "-// W3C // DTD XHTML 1.0 Transitional // EN" http://www.w3.org/xhtml1/dtddml1-transitationAl.dtd ">

<head>

<Title> Non -Title Document </Title>

var second = 5000; // intervals 5 seconds

var C = 0;

function scroll () {

C ++;

if ("b" == document.activeElement.id) {{

var sTR = "Timing check the <b>"+c+"</b> times <br/>";

if (document.getelementbyidx_x_x ('b'). value! = "") {

Str+= "Input box The current content is the current content is <br/> <b>"+DCUMENT.GetelementByidx_x_x ('B'). Value+"</b>";;

}

document.GetelementByidx_x_x ('word'). Innerhtml = str;

}

</script>

</head>

<body>

<textarea id = "b" name = "b" style = "height: 100px; width: 300px;" Onfocus = "SetInterval ('Scroll (), Second)"> </Textarea> <br/> <br/<br /> "

</body>

</html>

Example 3. The following is the simplest example. After the timer time arrives, the warning window pops up.

Copy code code as follows:

<head>

function count () {) {

document.GetelementByidx_x_x ('m'). Innerhtml = "Time has begun!"

settimeout ("Alert ('Ten seconds to!", 10000)

}

</script>

<body>

</body>

</html>

Example 4: The countdown jumps timing and timely

Copy code code as follows:

<html>

<head>

<Title> My JSP 'DS04.JSP' Starting Page </Title>

<A href = "javascript: countdown"> </a> automatically jump after second ...

<!-The script starts->

Function Countdown (SECS) {

tiao.innertext = secs;

if (--scs> 0)

settimeout ("Countdown ("+SECS+"), 1000); 1000);

}

countdown (3);

</script>

<!-Script end->

</head>

Example 6:

Copy code code as follows:

<head>

</head>

Example 7:

Copy code code as follows:

settimeout ("Window.location.href = 'B.Html'", 2000);

// Both of the following can be used

//settimeOut 18"javascript:lcation.href='b.html '", 2000);

//settimeout.com Window.Location='b.html '", 2000);

</script>

Example 8:

Copy code code as follows:

var second = document.GetelementByidx_x ('TotalSecond'). InnerHtml;

if (ISNAN (Second)) {{

// ... not the number of numbers

} Else {

SetInterval (Function () {

document.GetelementByidx_x ('TotalSecond'). InnerHtml = -SECOND;

if (second <= 0) {{

Window.Location = 'B.html';

}

}, 1000);

}

</script>

JS timer (execute once, repeat execution)

Share a JS code, a small example of the JS timer, divided into a timer and repeated execution timer for execution. Reference for friends who are beginners.

1. Only execute the timer once

Copy code code as follows:

// The timer runs asynchronous

function hello () {

Alert ("Hello");

}

// Use the method name execution method

var t1 = window.settimeout (Hello, 1000);

var t2 = window.settimeout ("hello ()", 3000); // Use the string execution method

Window.cleArtimeout (T1); // Remove the timer

</script>

2. Repeated execution timer

Copy code code as follows:

function hello () {

Alert ("Hello");

}

// Repeat a certain method

var T1 = Window.Setinterval (Hello, 1000);

var T2 = Window.Setinterval ("Hello ()", 3000);

// The method of removing the timer

Window.Clearinterval (T1);

</script>

Remark:

If there are two methods on one page, they are executed after the page is loaded, but the actual failure can be executed in order. You can refer to the following method:

You can add a timer to the online method, set a timer, and then run after "delay" for a period of time.

Copy code code as follows:

<! Doctype HTML PUBLIC "-// W3C // DTD XHTML 1.0 Transitional // EN" http://www.w3.org/xhtml1/dtddml1-transitationAl.dtd ">

<Title> Untitled Page </Title>

var yc = new object ();

Function Beginyc ()

{{

var secondsyc = document.GetelementByid ("txtycseconds"). Value;

try

{{

YC = Settimeout ("Alert ('Delay"+Secondsyc+"second success'), SecondSyc*1000);

}

catch (e)

{{

alert ("Please enter the correct second number.");

}

Function Overyc ()

{{

Cleartimeout (YC);

Yc = null;

alert ("Termination delay successful.");

}

/**************************↓↓↓↓定时器的使用↓↓↓↓*********** ****************************

var timerds = new object ();

var timerdds = new object ();

Function Beginds ()

{{

sn.innerhtml = "0";

Timerds = SetInterval ("Addone ()", PARSEINT (Document.GetelementByid ("TXTINTIRVALSECONDS"). Value, 10)*1000); 10)*1000);

}

Function Goonds ()

{{

Timerds = SetInterval ("Addone ()", PARSEINT (Document.GetelementByid ("TXTINTIRVALSECONDS"). Value, 10)*1000); 10)*1000);

}

Function overds ()

{{

Clearinterval (Timerds);

timerds = null;

}

Function delayds ()

{{

overds ();

Timerdds = settimeout ("Goonds ()", Document.GetelementByid ("TXTDDSSECONDS"). Value*1000);

}

Function Addone ()

{{

if (SN.Innerhtml == "10")

{{

overds ();

Alert ("Congratulations, it has successfully reached 10 seconds");

Return;

}

sn.innerHtml = Parseint (Sn.Innerhtml, 10) +1;

}

</script>

</head>

<body>

<div>

Use of delayer: </div>

<div>

<input type = "Button" id = "Button1" Onclick = "Javascript: Alert ('Good MonRNING');

</div>

<br />

<div>

Use of timer: </div>

<div>

</div>

</form>

</body>

</html>