Some characteristics of JS timer and three solutions to avoid setting the timer repeatedly

Some features of JS timer and how to avoid setting the timer repeatedly

Overview and summary

When each JS timer is generated, it will be assigned an id by the system. This id is a positive integer, and the timer id in a page is not repeated. We can receive this id with a variable. However, if you repeatedly execute a receive create statement, you can only receive the id of the newly created timer, and the id of the previously created timer will be overwritten, However, the number of timers is increasing, which will cause some functions of the interface to be disordered. The solution is that when you press the start button repeatedly, if there is already a timer, you will not execute the statement. I listed the error code and three solutions to solve the problem of timer re creation.
ps: the timer id is incremented and accumulated from 1, but one small detail is that when you run a page, for example, you create a fifth timer with an id of 5, then you destroy it and create a timer, then the timer number will be 6, Instead of 5, id No. 5 will not be reused due to the destruction of the fifth timer.

case analysis

Two buttons are used to control the flashing of the light bulb, CSS is used to simply beautify the page, and then the control function is implemented by JavaScript, but some problems are encountered when using the timer in JS. No more nonsense. Here is the first code

<!DOCTYPE html>
<!--default en,But in principle, it should be changed to ch Better -->
<html lang="ch">
<head>
<!--Set character encoding to utf-8 -->
    <meta charset="UTF-8">
    <title>electric light</title>
<!--Here is CSS Partial code -->
    <style>
/*
border-radius:Set border fillet
margin-top: Set top margin
margin-left:Set left outer margin
 Here, the percentage of margin is more convenient to fit points than setting px directly
*/
        #stop{
            background-color: aqua;
            border-radius: 10px;
            width: 100px;
            height: 40px;
            margin-top: 10%;
            margin-left: 20%;

        }
        #start{
            background-color: blueviolet;
            border-radius: 10px;
            width: 100px;
            height: 40px;
            margin-top: 10%;
            margin-left: 37.5%;

        }
        #light_off{
            margin-left:50%;
            margin-top: 10%;

        }
    </style>
</head>
<body>
<!--Here is the definition of three elements -->
    <img id="light_off" src="imge/off.gif"><br>
    <input type="button" value="START" name="start" id="start">
    <input type="button" value="STOP" name="stop" id="stop">

    <script>
/*
This is the JS part
 That's the problem
*/
/*
Here first
*/
        let a =100;
        let light_off = document.getElementById("light_off");
        let but_start = document.getElementById("start")
        let but_stop = document.getElementById("stop")
        /*
        Here, the bulb switching state function is encapsulated into a function
        */
        function off_open(){
            if (light_off.src.endsWith("imge/off.gif")){
                light_off.src="imge/on.gif";
            }else {
                light_off.src="imge/off.gif";
            }
        }
        but_start.onclick = function (){
        /*Here is a small detail. If let or var is used to define variables, the resulting variables are local variables, while if direct write is not used, the resulting variables are global variables
        Then, the JS loop timer is used to execute every 100ms. The first parameter is the executed function and the second is the time interval
        That's the problem. Every time I click the start button, I will create a timer, but only the latest timer will be assigned to b, and then the STOP button can only interrupt the latest timer. I can't find the previous timers, but they are still working. The more I click the start button, the smaller the bulb flashing interval, and STOP can't STOP, The first improvement method I think of here is to judge whether b is empty when pressing start. If it is empty, the function of bulb flashing will be executed. If it is not empty, it will not be executed. However, I misunderstood the mechanism of the timer. The timer actually gives b an integer number, and then after clearing the timer, the number of the timer itself will become null
        */
                b =setInterval(off_open,100);
        }
        but_stop.onclick = function (){
            clearInterval(b)
        }

    </script>
</body>
</html>

Modification method 1

Here, a flag is introduced to judge whether clicking start again can take effect. The flag defaults to false. If the flag is false, the statement creating the timer will take effect. After it takes effect, the flag will become true. After pressing the stop button, not only the only timer will be cleared, but also the flag will become false, which solves the problem.

<script>
        let b;
        let a =100;
        let flag = false;
        let light_off = document.getElementById("light_off");
        let but_start = document.getElementById("start")
        let but_stop = document.getElementById("stop")
        function off_open(){
            if (light_off.src.endsWith("imge/off.gif")){
                light_off.src="imge/on.gif";
            }else {
                light_off.src="imge/off.gif";
            }
        }
        but_start.onclick = function (){
            if (flag ==false){
                b =setInterval(off_open,100);
                flag = true;
            }
        }
        but_stop.onclick = function (){            
            clearInterval(b);
            flag = false;
        }

    </script>

Modification method 2

This method is mainly modified after understanding the js timer numbering mechanism. b is still used as the container, but this time we first assign a value to b, which is a number that the system will never assign to the timer, that is - 100. Then, after pressing the pause key, although the value of the timer itself has become null, it is not assigned to b, Then we assign b a negative number - 50 different from - 100, so when we press start again, we just need to judge whether b is equal to - 100 or - 50, because if there is a timer, b must be a positive integer

<script>
        let b =-100;
        // let flag = false;
        let light_off = document.getElementById("light_off");
        let but_start = document.getElementById("start")
        let but_stop = document.getElementById("stop")
        function off_open(){
            if (light_off.src.endsWith("imge/off.gif")){
                light_off.src="imge/on.gif";
            }else {
                light_off.src="imge/off.gif";
            }
        }
        but_start.onclick = function (){
            if (b==-100||b==-50){
                b =setInterval(off_open,100);
            }
        }
        but_stop.onclick = function (){
            clearInterval(b);
            b=-50
        }

    </script>

Repair method 3

Here, according to the rule of increasing timer allocation id, by controlling the increase of b and c variables, through some designs, if they differ by 1, then it is allowed to create a timer. If there are already timers, then they are equal.

<script>
        let b=1;
        let c=0;
        let light_off = document.getElementById("light_off");
        let but_start = document.getElementById("start")
        let but_stop = document.getElementById("stop")
        function off_open(){
            if (light_off.src.endsWith("imge/off.gif")){
                light_off.src="imge/on.gif";
            }else {
                light_off.src="imge/off.gif";
            }
        }
        but_start.onclick = function (){
            if (b==(c+1)){
                b =setInterval(off_open,100);
                c+=1;
            }
        }
        but_stop.onclick = function (){
            clearInterval(b);
            b+=1;
        }
    </script>

Tags: Javascript html css

Posted on Sat, 18 Sep 2021 11:26:33 -0400 by tomcurcuruto