您的位置:

setinterval 停止详解

一、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 代码
    #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;
    }

    // JavaScript 代码
    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);
    }

点击下面的按钮可以停止 setinterval 的周期性调用。