javascript处理setTimeout（）的多个实例？

时间：2022-11-15 01:17:47

I have two buttons, show time, and stop time. when click on show time, it set up setTimeout() to update the current time. when stop time is clicked, i want to stop the time 5 sec later. the problem I'm having is that if I click on show time twice, then I click stop time, the time is till ticking. I need to click stop time twice in order to stop the time. so I think there are multiple instances of setTimeout() when i click show time multiple times. I'm wondering how can I make sure there is only one setTimeout(), so even show time is clicked multiple times, it only requires to click on stop time once to stop the time.

我有两个按钮,显示时间和停止时间。当点击显示时间时,它设置setTimeout()来更新当前时间。当点击停止时间时,我想在5秒后停止时间。我遇到的问题是,如果我点击显示时间两次,那么我点击停止时间,时间直到滴答作响。我需要点击两次停止时间才能停止时间。所以当我单击多次显示时间时,我认为有多个setTimeout()实例。我想知道如何确保只有一个setTimeout(),所以即使多次点击显示时间,也只需要点击一次停止时间来停止时间。

<body>
    <script>
        var iTimeout;

        function startTime() {
            var today = new Date();
            var hour = today.getHours();
            var min = today.getMinutes();
            var sec = today.getSeconds();
            document.getElementById('time').innerHTML =
                hour + ":" + min + ":" + sec;
            iTimeout = window.setTimeout(startTime, 1000);
        }

        function stopTimer() {
            window.setTimeout(function() {
                window.clearTimeout(iTimeout);
                console.log("clear");
            }, 5000);
        }
    </script>
    </head>

    <div id="time"></div>
    <button onclick="stopTimer()">stop time</button>
    <button onclick="startTime()">show time</button>

</body>

3 个解决方案

#1

0  

You can clear the iTimeout before starting the new timer in case the user clicks on start time twice

如果用户点击开始时间两次,您可以在启动新计时器之前清除iTimeout

function startTime() {
            var today = new Date();
            var hour = today.getHours();
            var min = today.getMinutes();
            var sec = today.getSeconds();
            document.getElementById('time').innerHTML =
                hour + ":" + min + ":" + sec;
            if(iTimeout)
            {
               window.clearTimeout(iTimeout);
            }
            iTimeout = window.setTimeout(startTime, 1000);
        }

#2

0  

var iTimeout;

 function startTime() {
   var today = new Date();
   var hour = today.getHours();
   var min = today.getMinutes();
   var sec = today.getSeconds();
   document.getElementById('time').innerHTML =
     hour + ":" + min + ":" + sec;
   // clear the timeout if it exists.
   if (iTimeout) {
     window.clearTimeout(iTimeout);  
   }
   iTimeout = window.setTimeout(startTime, 1000);
 }

 function stopTimer() {
   window.setTimeout(function() {
     window.clearTimeout(iTimeout);
     console.log("clear");
   }, 5000);
 }
<div id="time"></div>
<button onclick="stopTimer()">stop time</button>
<button onclick="startTime()">show time</button>

#3

0  

As @Joyson and @Ayan said, you can check if the iTimeout is already set, and clear it upon every request to create a new timer. i'd do the same, although, if i have to call a function repeatedly after a specific delay, i'd use setInterval instead. makes the code clean.

正如@Joyson和@Ayan所说,您可以检查iTimeout是否已经设置,并在每次创建新计时器的请求时清除它。我会这样做,但是,如果我必须在特定延迟后重复调用一个函数,我会改用setInterval。使代码干净。

<script>
    var iTimeout;

    function getTime() {
        var today = new Date();
        var hour = today.getHours();
        var min = today.getMinutes();
        var sec = today.getSeconds();
        document.getElementById('time').innerHTML =
            hour + ":" + min + ":" + sec;
    }
    function startTime(){
        if(iTimeout)
            window.clearInterval(iTimeout);
        iTimeout = window.setInterval(getTime, 1000);
    }


    function stopTimer() {
        window.setTimeout(function() {
            window.clearInterval(iTimeout);
            console.log("clear");
        }, 5000);
    }
</script>


<div id="time"></div>
<button onclick="stopTimer()">stop time</button>
<button onclick="startTime()">show time</button>

doesn't it?

#1

0  

You can clear the iTimeout before starting the new timer in case the user clicks on start time twice

如果用户点击开始时间两次,您可以在启动新计时器之前清除iTimeout

function startTime() {
            var today = new Date();
            var hour = today.getHours();
            var min = today.getMinutes();
            var sec = today.getSeconds();
            document.getElementById('time').innerHTML =
                hour + ":" + min + ":" + sec;
            if(iTimeout)
            {
               window.clearTimeout(iTimeout);
            }
            iTimeout = window.setTimeout(startTime, 1000);
        }

#2

0  

var iTimeout;

 function startTime() {
   var today = new Date();
   var hour = today.getHours();
   var min = today.getMinutes();
   var sec = today.getSeconds();
   document.getElementById('time').innerHTML =
     hour + ":" + min + ":" + sec;
   // clear the timeout if it exists.
   if (iTimeout) {
     window.clearTimeout(iTimeout);  
   }
   iTimeout = window.setTimeout(startTime, 1000);
 }

 function stopTimer() {
   window.setTimeout(function() {
     window.clearTimeout(iTimeout);
     console.log("clear");
   }, 5000);
 }
<div id="time"></div>
<button onclick="stopTimer()">stop time</button>
<button onclick="startTime()">show time</button>

#3

0  

As @Joyson and @Ayan said, you can check if the iTimeout is already set, and clear it upon every request to create a new timer. i'd do the same, although, if i have to call a function repeatedly after a specific delay, i'd use setInterval instead. makes the code clean.

正如@Joyson和@Ayan所说,您可以检查iTimeout是否已经设置,并在每次创建新计时器的请求时清除它。我会这样做,但是,如果我必须在特定延迟后重复调用一个函数,我会改用setInterval。使代码干净。

<script>
    var iTimeout;

    function getTime() {
        var today = new Date();
        var hour = today.getHours();
        var min = today.getMinutes();
        var sec = today.getSeconds();
        document.getElementById('time').innerHTML =
            hour + ":" + min + ":" + sec;
    }
    function startTime(){
        if(iTimeout)
            window.clearInterval(iTimeout);
        iTimeout = window.setInterval(getTime, 1000);
    }


    function stopTimer() {
        window.setTimeout(function() {
            window.clearInterval(iTimeout);
            console.log("clear");
        }, 5000);
    }
</script>


<div id="time"></div>
<button onclick="stopTimer()">stop time</button>
<button onclick="startTime()">show time</button>

doesn't it?

标签：

相关文章