Question

我有两个按钮，显示时间和停止时间。当点击显示时间时，它设置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>

Answer 1

如果用户点击两次开始时间

，您可以在启动新计时器之前清除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);
        }

Answer 2

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>

Answer 3

正如@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>

不是吗？

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

3 个答案: