js timer (execute once, repeat execution)

Author：Eve Cole Update Time：2025-01-27 21:00:02

1. A timer that only executes once

Copy the code code as follows:

//Timer runs asynchronously

function hello(){

alert("hello");

}

//Execute the method using the method name

var t1 = window.setTimeout(hello,1000);

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

window.clearTimeout(t1);//Remove the timer

</script>

2. Repeated execution timer

Copy the code code as follows:

function hello(){

alert("hello");

}

// Repeat a method

var t1 = window.setInterval(hello,1000);

var t2 = window.setInterval("hello()",3000);

//How to remove the timer

window.clearInterval(t1);

</script>

Remark:

If there are two methods on a page, both of which are executed after the page is loaded, but actually cannot be executed in order, you can refer to the following methods to solve the problem:

You can add a timer in the onload method, set a timer, and "delay" it for a period of time before running it. This can be considered to distinguish the order of page loading and running methods.

In JavaScript, there are two dedicated functions for timers, namely:

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

2. Loop timer: timename=setInterval("function();",delaytime);

The first parameter "function()" is the action to be executed when the timer is triggered. It can be one function or several functions. The functions can be separated by ";". For example, if you want to pop up two warning windows, you can replace "function();" with

"alert('First warning window!');alert('Second warning window!');"; and the second parameter "delaytime" is the interval time in milliseconds, that is, fill in "5000 " means 5 seconds.

The countdown timer triggers an event after the specified time is reached, while the loop timer triggers the event repeatedly when the interval time arrives. The difference between the two is that the former only acts once, while the latter acts continuously.

For example, after you open a page and want to automatically jump to another page every few seconds, you need to use the countdown timer "setTimeout("function();",delaytime)", and if you want to set a certain sentence appear one by one,

You need to use the loop timer "setInterval("function();",delaytime)".

To obtain the focus of the form, document.activeElement.id is used. Use if to determine whether document.activeElement.id and the form's ID are the same.

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

Timer:

Used to specify a program to be executed after a specific period of time.

Timing execution in JS, the difference between setTimeout and setInterval, and the cancellation method

setTimeout(Expression,DelayTime), after DelayTime, an Expression will be executed. setTimeout is used to delay for a period of time before performing an operation.

setTimeout("function",time) sets a timeout object

setInterval(expression, delayTime), each DelayTime will execute Expression. It can often be used to refresh expressions.

setInterval("function",time) sets a timeout object

SetInterval repeats automatically, and setTimeout does not repeat.

clearTimeout(object) clears the set setTimeout object

clearInterval(object) clears the setInterval object

Just give two examples.

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

Copy the code code as follows:

<html>

<head>

<title>Untitled Document</title>

var str = "This is a sample text for testing";

var seq = 0;

var second=1000; //Interval time 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 on the input box, check the input box information regularly, and do not perform the checking action when the focus is not on.

Copy the code code as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Untitled Document</title>

var second=5000; //Interval time 5 seconds

var c=0;

function scroll() {

c++;

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

var str="Scheduled check<b> "+c+" </b>time<br/>";

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

str+="The current content of the input box is<br/><b> "+document.getElementByIdx_x_x('b').value+"</b>";

}

document.getElementByIdx_x_x('word').innerHTML = str;

}

</script>

</head>

<body>

</body>

</html>

Example 3. The following is the simplest example. A warning window pops up after the timer expires.

Copy the code code as follows:

<head>

function count() {

document.getElementByIdx_x_x('m').innerHTML="Timer has started!";

setTimeout("alert('Ten seconds up!')",10000)

}

</script>

<body>

</body>

</html>

Example 4: Countdown time jump

Copy the code code as follows:

<html>

<head>

<title>My JSP 'ds04.jsp' starting page</title>

<a href="javascript:countDown"> </a> Automatically jump after seconds...

function countDown(secs){

tiao.innerText=secs;

if(--secs>0)

setTimeout("countDown("+secs+")",1000);

}

countDown(3);

</script>

</head>

Example 6:

Copy the code code as follows:

<head>

</head>

Example 7:

Copy the code code as follows:

setTimeout("window.location.href='b.html'", 2000);

//Both of the following two can be used

//setTimeout("javascript:location.href='b.html'", 2000);

//setTimeout("window.location='b.html'", 2000);

</script>

Example 8:

Copy the code code as follows:

var second = document.getElementByIdx_x('totalSecond').innerHTML;

if(isNaN(second)){

//...not a numerical processing method

}else{

setInterval(function(){

document.getElementByIdx_x('totalSecond').innerHTML = --second;

if (second <= 0) {

window.location = 'b.html';

}

}, 1000);

}

</script>