BOM系列第一篇之定时器setTimeout和setInterval

一、概述

在前端开发中，我们经常需要在页面中加入一些动态效果，比如定时轮播图、倒计时等等，而这些效果往往需要用到JavaScript定时器。在JavaScript中，我们可以使用setTimeout()和setInterval()两个函数来实现定时器。

setTimeout()函数可以在一定时间后执行一次特定的代码，而setInterval()函数可以每隔一定时间重复执行一段特定的代码，常见的应用场景有轮播图、计时器等。

二、使用setTimeout()

before code

console.log("before setTimeout");

setTimeout(() => {
  console.log("in setTimeout");
}, 1000);

console.log("after setTimeout");

after code

第一个代码块会先输出"before setTimeout"和"after setTimeout"，然后等待1秒钟后输出"in setTimeout"。如上代码中，setTimeout()的第一个参数是一个回调函数，在定时器完成后执行，第二个参数表明要等待的时间，单位为毫秒。

setTimeout()的返回值是一个定时器ID，如果需要取消定时器，可以调用clearTimeout()方法，传入该定时器ID即可。

例如，我们可以使用setTimeout()函数实现一个简单的倒计时，代码如下：

let time = 10;
let timer = setTimeout(() => {
  if (time > 0) {
    time -= 1;
    console.log(`${time} seconds remaining.`);
  } else {
    console.log("Time's up!");
    clearTimeout(timer);
  }
}, 1000);

三、使用setInterval()

before code

let counter = 0;
let interval = setInterval(() => {
  console.log(`current count:${counter}`);
  counter++;
  if (counter > 5) {
    clearInterval(interval);
  }
}, 1000);

after code

setInterval()用于定时重复执行一段代码，与setTimeout()相似，第一个参数仍然是一个回调函数，第二个参数代表执行间隔时间，也是以毫秒为单位的。setInterval()同样返回一个定时器ID，用于取消定时器，使用clearInterval()方法。

下面是一个实现轮播图自动切换的例子，代码如下：

<html>
  <head>
    <style>
      #slider {
        width: 400px;
        height: 300px;
        overflow: hidden;
      }
      .slide {
        width: 400px;
        height: 300px;
        float: left;
        text-align: center;
        font-size: 30px;
        line-height: 300px;
      }
      .slide:nth-child(1) {
        background-color: red;
      }
      .slide:nth-child(2) {
        background-color: green;
      }
      .slide:nth-child(3) {
        background-color: blue;
      }
      .slide:nth-child(4) {
        background-color: yellow;
      }
      .slide:nth-child(5) {
        background-color: purple;
      }
    </style>
  </head>
  <body>
    <div id="slider">
      <div class="slide">1</div>
      <div class="slide">2</div>
      <div class="slide">3</div>
      <div class="slide">4</div>
      <div class="slide">5</div>
    </div>
    <button onclick="start()">Start</button>
    <button onclick="stop()">Stop</button>
    <script>
      let slider = document.getElementById("slider");
      let slides = slider.querySelectorAll(".slide");
      let currentIndex = 0;
      let interval = null;
      start();
      function start() {
        if (interval) {
          clearInterval(interval);
        }
        interval = setInterval(() => {
          currentIndex = currentIndex + 1 >= slides.length ? 0 : currentIndex + 1;
          apply(currentIndex);
        }, 2000);
      }
      function stop() {
        clearInterval(interval);
      }
      function apply(index) {
        for (let i = 0; i < slides.length; i++) {
          slides[i].style.display = i === index ? "block" : "none";
        }
      }
    </script>
  </body>
</html>

使用setInterval()函数实现了自动切换轮播图，每隔2秒钟调用一次apply()方法，实现自动切换。同时，为了让用户手动控制轮播图的切换，添加了“Start”和“Stop”两个按钮，实现对定时器ID的控制。

通过上述示例，我们可以看到使用定时器可以快速实现网页的动态效果，给用户带来更好的交互体验。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：BOM系列第一篇之定时器setTimeout和setInterval - Python技术站