Javascript timer events use details

2020-03-30 01:15:26
OfStack

It is easy to use timing events in javascript. The two key methods are:

The second parameter indicates how many milliseconds from now the first parameter is executed.

Hint: 1000 milliseconds is equal to one second.

When the button in the following example is clicked, a prompt pops up after 5 seconds.


<html>
<head>
<script type="text/javascript">
function timedMsg()
 {
 var t=setTimeout("alert('5 seconds!')",5000)
 }
</script>
</head>
<body>
<form>
<input type="button" value="Display timed alertbox!" onClick="timedMsg()">
</form>
</body>
</html>

Instance - An infinite loop

To create a timer running in an infinite loop, we need to write a function that calls itself. In the following example, when a button is clicked, the input field counts from 0.


<html>
<head>
<script type="text/javascript">
var c=0
var t
function timedCount()
 {
 document.getElementById('txt').value=c
 c=c+1
 t=setTimeout("timedCount()",1000)
 }
</script>
</head>
<body>
<form>
<input type="button" value="Start count!" onClick="timedCount()">
<input type="text" id="txt">
</form>
</body>
</html>

ClearTimeout ()

grammar


clearTimeout(setTimeout_variable)

The instance

The following example is similar to the infinite loop example above. The only difference is, now we've added a "Stop Count!" Button to stop the counter:


<html>
<head>
<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>
<form>
<input type="button" value="Start count!" onClick="timedCount()">
<input type="text" id="txt">
<input type="button" value="Stop count!" onClick="stopCount()">
</form>
</body>
</html>

Two other important approaches:


setInterval()
setInterval() - executes a function, over and over again, at specified time intervals

Loop executes a method at a specified interval

Grammar:


window.setInterval("javascript function",milliseconds);

Note: the first argument must be a function, and the second argument is the interval between the execution of the function.

Example:


<html>
<script type="text/javascript">
setInterval(function() {alert("hello")},500);
</script>
</html>

Note: in the above example, the execution effect is to alert("hello") every 500ms;

Another clock:


<html>
<body>
<p id="demo" ></p>
<script type="text/javascript">
setInterval(function(){ myTimer()},1000);
        function  myTimer(){
                var d = new Date();
                var t=d.toLocaleTimeString();
                document.getElementById('demo').innerHTML=t;
        }
</script>
</body>
</html>

How w to stop the setInterval() method?


window.clearInterval()

Grammar:


window.clearInterval(intervalVariable)


The window.clearInterval() method can be written without the window prefix.
To be able to use the clearInterval() method, you must use a global variable when creating the interval method:
myVar=setInterval("javascript function",milliseconds);
Then you will be able to stop the execution by calling the clearInterval() method.

Example:


<html>
<body>
<p id="demo" ></p>
<p id="demo2" onclick="stop()">stop</p>
<script type="text/javascript">
var temp=setInterval(function(){ myTimer()},1000);
        function  myTimer(){
                var d = new Date();
                var t=d.toLocaleTimeString();
                document.getElementById('demo').innerHTML=t;
        }
function stop(){
   <html>
<body>
<p id="demo" ></p>
<p id="demo2" onclick="stop()">stop</p>
<script type="text/javascript">
var temp=setInterval(function(){ myTimer()},1000);
        function  myTimer(){
                var d = new Date();
                var t=d.toLocaleTimeString();
                document.getElementById('demo').innerHTML=t;
        }
function stop(){
        clearInterval(temp);
}
</script>
</body>
</html>
}
</script>
</body>
</html>