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 的周期性調用。

停止輪播