js定时器的使用(实例讲解)

2023年5月27日下午3:14 • JavaScript

JS定时器是一种常见的编程工具，可以用于在一定时间间隔内执行一些具体的操作或调用某一函数。使用JS定时器，可以增强网站的交互性和用户体验度。

下面，我们来详细讲解JS定时器的使用步骤和实例讲解。

步骤一：设置定时器

在JavaScript中，使用setInterval()方法可以创建一个定时器。这个方法有两个参数：要运行的函数名和定时器开始运行的时间间隔（单位为毫秒）。例如，这里创建了一个每秒执行一次的定时器：

setInterval(function() {
    console.log("Hello world!");
}, 1000);

说明：

setInterval()方法的第一个参数是一个匿名函数。每次定时器运行时，这个函数都会被调用。
第二个参数是定时器开始运行的时间间隔，这里是1000毫秒，也就是1秒。

步骤二：停止定时器

如果需要停止定时器，可以使用clearInterval()方法。这个方法只需要一个参数，即要清除的定时器变量。例如，下面的代码创建了一个每秒执行一次的定时器，并在第5次执行时停止了定时器：

var i = 0;
var timer = setInterval(function() {
    i++;
    console.log("Hello world!");
    if (i == 5) {
        clearInterval(timer);
    }
}, 1000);

说明：

这里使用了一个计数器变量i，每次定时器运行时，计数器加1。
当计数器等于5时，使用clearInterval()方法停止定时器。

示例一：用定时器实现轮播图

下面这个例子演示了如何使用定时器来实现网页上的轮播图效果：

<!DOCTYPE html>
<html>

<head>
    <title>Image Slideshow</title>
    <style>
        #slideshow {
            width: 300px;
            height: 200px;
            overflow: hidden;
        }

        #slideshow img {
            width: 300px;
            height: 200px;
            display: none;
        }
    </style>
</head>

<body>
    <div id="slideshow">
        <img src="image1.jpg" alt="Image 1">
        <img src="image2.jpg" alt="Image 2">
        <img src="image3.jpg" alt="Image 3">
    </div>

    <script>
        var current = 0;
        var images = document.getElementsByTagName("img");

        setInterval(function() {
            for (var i = 0; i < images.length; i++) {
                images[i].style.display = "none";
            }

            current = (current + 1) % images.length;
            images[current].style.display = "block";
        }, 3000);
    </script>
</body>

</html>

说明：

这个例子中，我们需要创建一个包含多个图片的div容器，使用CSS来隐藏所有图片。
在JS代码中，使用定时器每隔3秒钟轮播一次图片。每次轮播时，将所有图片都隐藏，然后显示下一张图片。

示例二：制作进度条

下面这个例子演示了使用定时器创建一个简单的进度条：

<!DOCTYPE html>
<html>

<head>
    <title>Progress Bar</title>
    <style>
        #progress {
            width: 300px;
            height: 20px;
            border: 1px solid #999;
        }

        #bar {
            width: 0;
            height: 18px;
            background-color: blue;
            transition: width 1s ease-in-out;
        }
    </style>
</head>

<body>
    <div id="progress">
        <div id="bar"></div>
    </div>

    <script>
        var progress = document.getElementById("bar");
        var width = 0;
        var timer = setInterval(function() {
            if (width >= 100) {
                clearInterval(timer);
            } else {
                width += 10;
                progress.style.width = width + "%";
            }
        }, 1000);
    </script>
</body>

</html>