BOM(2.1)清除定时器

139 阅读1分钟

上一章我们知道如何设置setTimeout和setInterval,但是有时候这些方法也会给我们带来不便捷的地方,因此我们需要知道如何清除定时器

清除setTimeout()定时器

清除这个定时器需要用的clearTimeout(TimeoutID)方法,里面的参数就是你给定时器设置的标识符

   <!-- 如何清除定时器? -->
    <div class="clear">清除</div>
    <!-- 清除setTimeout  clearTimeout(timeoutID) -->
  <script>
    const clear =document.querySelector("div");
    
    //这里给它设置一个标识符timer
      var timer = setTimeout(function () {
            console.log('时间到了');
        }, 5000);
        clear.addEventListener("click",function(){
            clearTimeout(timer);//清除该定时器
            console.log("被清除了");
        });
 </script>

清除setInterval()定时器

清除这个定时器需要用的clearInterval(intervalID)方法,里面的参数就是你给定时器设置的标识符

   <!-- 如何清除setInterval定时器? -->
    <div class="clear">清除</div>
    <!-- 清除setInterval  clearInterval(intervalID) -->
     <script>
        const clear = document.querySelector("div");
        var timer = setInterval(function () {
            console.log(1);
        }, 1000);
        clear.addEventListener("click", function () {
            clearInterval(timer);//清除该定时器
            console.log("被清除了");
        });
    </script>
 </script>

清除setInterval()定时器和清除setTimeout()大差不差