The methods for stopping setInterval and setTimeout events in JavaScript
This article describes how to stop the execution of setInterval and setTimeout events in JavaScript. This article describes the code and syntax for operating instances. For more information, see
The setInterval and setTimeout methods are often used to execute loop events in js Code. The details of these two methods are not discussed here, this section briefly describes how to stop a loop event.
(1) The setInterval method can call functions or computation expressions according to the specified period (in milliseconds). To stop this method, you can use the clearInterval method. Example:
The Code is as follows:
<Html>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Body>
<Input type = "text" id = "clock" size = "50"/>
<Script language = javascript>
Var int = self. setInterval ("clock ()", 50); // call the clock () function every 50 milliseconds
Function clock (){
Var t = new Date ();
Document. getElementById ("clock"). value = t;
}
</Script>
<Button onclick = "window. clearInterval (int)"> stop interval </button>
</Body>
</Html>
Syntax clearInterval (id_of_setinterval)
The id_of_setinterval parameter indicates the ID value returned by setInterval.
The clearInterval () method can cancel the timeout set by setInterval (); the parameter of the clearInterval () method must be the ID value returned by setInterval.
(2) The setTimeout method is used to call a function or computing expression after a specified number of milliseconds. You can use the clearTimeout method to stop this method. Example:
Note: setTimeout () is executed only once. If you want to call it multiple times, use setInterval () or let the code itself call setTimeout () again ().
Copy the Code as follows:
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<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 );
}
</Script>
</Head>
<Body>
<Input type = "button" value = "Start count" onClick = "timedCount ()">
<Input type = "text" id = "txt">
<Input type = "button" value = "Stop counting" onClick = "stopCount ()">
</Body>
</Html>
The clearTimeout () method can cancel the timeout set by the setTimeout () method.
Syntax clearTimeout (id_of_settimeout)
The id_of_setinterval parameter indicates the ID value returned by setTimeout. This value identifies the delayed execution code block to be canceled.