setinterval 停止详解

发布时间：2023-05-22

一、setinterval 的基本介绍

setinterval 是 JavaScript 中一个周期性调用函数的方法，用来间隔一定时间重复执行某个函数。 setinterval 有两个参数：第一个参数是要执行的代码，第二个参数是间隔时间，间隔时间的单位是毫秒。 setinterval 的调用，会返回一个 ID 值，这个 ID 值可以用来在需要的时候停止 setinterval 的周期性调用。

二、setinterval 的停止方法

setinterval 的停止有两种方式：一种是使用 clearInterval 函数，另一种是使用 clearTimeout 函数。 clearInterval 的参数是 setinterval 调用后返回的 ID 值，调用 clearInterval 函数后，就可以停止 setinterval 的周期性调用。

var intervalId = setInterval(function(){
    // 需要周期性执行的代码
}, 1000);
clearInterval(intervalId);

使用 clearTimeout 函数也可以停止 setinterval 的周期性调用，但是需要注意的是，clearTimeout 函数的参数必须是 setTimeout 函数调用后返回的 ID 值，如果 clearTimeout 函数的参数是 setInterval 函数调用返回的 ID 值，则无法起到停止 setinterval 的作用。

三、使用 setinterval 前的注意事项

在使用 setinterval 的时候，需要注意以下几点： 1、setinterval 的执行时间可能会受到代码运行效率的影响，如果要保证执行时间的准确性，可以使用 setTimeout 以时间控制的方式来周期性执行。

function intervalFunction(){
    // 需要周期性执行的代码
    setTimeout(intervalFunction, 1000);
}
intervalFunction();

2、setinterval 执行的时间间隔应该尽量大于函数的执行时间，否则多个函数可能会同时执行，导致代码执行效率低下。 3、setinterval 应该只在需要周期性执行某些代码的时候使用，如果只需要执行一次，可以使用 setTimeout。

四、实例演示

下面是一个使用 setinterval 和 clearInterval 实现图片轮播的例子。

<!-- HTML 代码 -->
<div id="imgContainer">
    <img src="img1.jpg" class="current">
    <img src="img2.jpg">
    <img src="img3.jpg">
</div>
<!-- CSS 代码 -->
<style>
#imgContainer {
    width: 500px;
    height: 300px;
    position: relative;
}
#imgContainer img {
    position: absolute;
    top: 0;
    left: 0;
}
#imgContainer img.current {
    z-index: 1;
    opacity: 1;
}
#imgContainer img.next {
    z-index: 0;
    opacity: 0;
}
</style>
<!-- JavaScript 代码 -->
<script>
var currentImgIndex = 0;
var intervalId = setInterval(function(){
    var imgArray = document.getElementsByTagName('img');
    // 隐藏当前图片
    imgArray[currentImgIndex].className = '';
    // 显示下一张图片
    currentImgIndex = (currentImgIndex + 1) % imgArray.length;
    imgArray[currentImgIndex].className = 'current next';
    // 动态改变图片透明度，实现渐变效果
    var opacity = 0;
    var fadeInId = setInterval(function(){
        opacity += 0.1;
        imgArray[currentImgIndex].style.opacity = opacity.toFixed(1);
        imgArray[(currentImgIndex + imgArray.length - 1) % imgArray.length].style.opacity = (1 - opacity).toFixed(1);
        if(opacity >= 1){
            clearInterval(fadeInId);
        }
    }, 50);
}, 5000);
var stopBtn = document.getElementById('stopBtn');
stopBtn.onclick = function(){
    clearInterval(intervalId);
};
</script>

点击下面的按钮可以停止 setinterval 的周期性调用。 <button id="stopBtn">停止轮播</button>

推荐文章