JavaScript中setInterval()用法舉例詳解

更新時間：2023年10月09日 10:07:40 作者：孫?悟?空

這篇文章主要給大家介紹了關于JavaScript中setInterval()用法的相關資料,setInterval()方法可按照指定的周期(以毫秒計)來調(diào)用函數(shù)或計算表達式,文中通過代碼示例介紹的非常詳細,需要的朋友可以參考下

1 基本語法

setInterval() 是 JavaScript 中的一個內(nèi)置函數(shù)，它用于在指定的間隔時間內(nèi)重復執(zhí)行一段代碼，實現(xiàn)周期性操作。該函數(shù)的語法如下：

setInterval(function, milliseconds, param1, param2, ...)

2 參數(shù)說明

function：必需，要重復執(zhí)行的函數(shù)或代碼塊。
milliseconds：必需，重復執(zhí)行的時間間隔（以毫秒為單位）。
param1, param2, ...：可選，傳遞給要執(zhí)行的函數(shù)的參數(shù)。如果無須傳遞參數(shù)，則省略此參數(shù)。

注意：

如果 setInterval() 函數(shù)的第一個參數(shù)是一個函數(shù)，那么該函數(shù)會在每個時間間隔后被調(diào)用，直到計時器被取消。

如果 setInterval() 函數(shù)的第一個參數(shù)是一個字符串，那么該字符串會被解釋為一段要執(zhí)行的 JavaScript 代碼。這種用法已經(jīng)被棄用，不建議使用。

如果 setInterval() 函數(shù)的時間間隔設為 0 或負數(shù)，那么該函數(shù)會立即執(zhí)行第一個參數(shù)所表示的函數(shù)或代碼，并且不會周期性地執(zhí)行。

如果 setInterval() 函數(shù)的時間間隔設為較小的值，那么可能會因為瀏覽器的性能限制而導致定時器不準確。建議將時間間隔設為 100 毫秒或以上，以保證計時器的準確性。

3 使用示例

使用匿名函數(shù)作為第一個參數(shù)，用來輸出當前時間，間隔時間是1000毫秒即1秒鐘。

// 每秒鐘輸出一次當前時間
setInterval(function() {
  console.log(new Date().toLocaleTimeString());
}, 1000);

4 停止 setInterval() 方法

setInterval() 方法會返回一個計時器ID，可以通過該計時器ID來取消計時器的執(zhí)行，方法如下：

intervalId = setInterval(function() {
  console.log(new Date().toLocaleTimeString());
}, 1000);
clearInterval(intervalId );

其中，intervalId 是一個變量，用于保存 setInterval() 方法返回的計時器對象ID。調(diào)用 clearInterval() 方法后，就可以取消計時器的執(zhí)行。

示例： 打印5次后，取消計時器的執(zhí)行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var counter = 0;
        maxNum = 5;
        function myFunc() {
            var date = new Date();
            console.log(date.toLocaleTimeString());
            counter++;
            if (counter == maxNum) {
                clearInterval(intervalId);
                console.log('已打印' + maxNum + "次");
            }
        }
        var intervalId = setInterval(myFunc, 1000);
    </script>
</body>
</html>

打印結果：

在這里插入圖片描述

附：JavaScript定時器setInterval如何做到在定義時先執(zhí)行一遍

JavaScript中的定時器setInterval是計時到才會開始執(zhí)行，有沒有辦法再定義的時候就先調(diào)用一遍，然后再定時執(zhí)行呢？

有，只要定義一個返回“定時執(zhí)行函數(shù)”（如“waitUploadThenSave”）的“執(zhí)行過程”，將“定時執(zhí)行函數(shù)”保存并調(diào)用一次，并且執(zhí)行過程中返回該“定時執(zhí)行函數(shù)”，將該“執(zhí)行過程”的主體作為定時器要定時執(zhí)行的function即可?？蓞⒖家韵麓a理解：

var count = 0;
var bNoNeedTimerRun = false;
var id = setInterval(
    (function () {
        var waitUploadThenSave = function () {
            //等待上傳執(zhí)行完成后保存數(shù)據(jù)：
            if (pThis.fileList.every(x => x.status == 'success')) {
                clearInterval(id);
                if (bNoNeedTimerRun) {
                    //初始運行時就檢測到都已上傳完成，則定時運行中無須做任何事情，清除定時器即可
                    return;
                }
                if (!id) {
                    //初始運行時未完成id賦值，此時就檢測到都已上傳完成，則無需再定時檢測運行
                    bNoNeedTimerRun = true;
                }                  
                setTimeout(() => pThis.saveTaskInfo(), 20); //wait for running on-success callback for upload
                return;
            } else {
                if (++count > 600) {
                    clearInterval(id);
                    pThis.$message({
                        message: `上傳資料${pThis.task.TaskText ? "“" + pThis.task.TaskText + "”" : ""}執(zhí)行超時，未執(zhí)行保存！`,
                        type: 'error'
                    });
                }
            }
        }
        waitUploadThenSave();
        return waitUploadThenSave;
    })()
    , 50);

封裝

每次都寫這么多是不是既麻煩又啰嗦，代碼還不簡潔，于是我封裝了如下“timerCheckRun”方法，用的時候只需傳入“條件、滿足條件時執(zhí)行的方法、超時提示” 參數(shù)即可：

//定時判斷執(zhí)行：
timerCheckRun: function (checkCondition, trueAction, timeOutAction, initRun = true, interval = 50, times = 600) {				
	var iCount = 0;
	var bDoAtInit = false;
	var timerId = setInterval((function () {
		var fn = function () {
			if (bDoAtInit) {
				clearInterval(timerId);
				return;     //初始運行時就已滿足條件并執(zhí)行，則無須開啟定時器，關閉定時器即可，無須重復執(zhí)行
			}
			if (checkCondition()) {
				clearInterval(timerId);
				if (initRun) {
					if (!timerId) {
						bDoAtInit = true;   //初始運行時未完成timerId賦值，此時如果已滿足條件，則做好標記，定時器中關閉定時執(zhí)行即可
					}
				}
				trueAction();
			} else {
				if (++iCount > times) {
					clearInterval(timerId);
					timeOutAction();
				}
			}
		};
		if (initRun) {
			fn();
		}
		return fn;
	})(), interval);
}

調(diào)用實例：

$JVue.timerCheckRun(
    () => _self.fileList.every(x => x.status == 'success') && (_self.cert.AttachFileIDsArray || []).length - (_self.cert.PendingDeleteAttachFileIDsArray || []).length == _self.fileList.length,
    () => _self.saveCertInfo(),
    () => _self.$message({
        message: '上傳資質附件超時，未執(zhí)行保存！',
        type: 'error'
    })
);