在 JavaScript 中停止 setInterval 呼叫
我們有時想在 JavaScript 中重複執行部分程式碼或函式。例如,如果你想每隔幾秒向使用者顯示一個彈出視窗,你可以使用 setInterval
函式。
但是,一次又一次地向使用者顯示相同的彈出視窗可能會令人惱火,並且可能會增加你網站的跳出率,從而影響你的 SEO。
這種情況只是一個用例。但是,在許多情況下,你需要在一段時間後停止 setInterval
。
這可以在 clearInterval()
函式的幫助下完成。
該函式將由 setInterval()
函式生成的區間 ID 作為輸入,然後停止該區間函式重複。這種方法真的很方便,可以在各種情況下使用。
現在讓我們看看如何使用這個函式來停止 JavaScript 中的 setInterval
函式。
在 JavaScript 中使用 clearInterval()
函式停止 setInterval()
setInterval()
函式用於在固定時間延遲後多次呼叫函式或執行一段程式碼。此方法返回一個 id,以後可以使用 clearInterval()
清除或停止間隔。
語法:
var intervalID = setInterval(func, [delay, arg1, arg2, ...]);
以下是 setInterval()
函式採用的引數:
func
:你希望在一段時間後繼續執行的功能。delay
:延遲是以毫秒為單位的時間(此引數是可選的)。該功能將在每次延遲後繼續重複。args1, ..., argN
:你還可以將各種引數傳遞給setInterval
函式,然後將其作為你已傳遞給setInterval()
的函式的輸入。該引數也是可選的。
首先,讓我們建立一個名為 showText()
的函式,它將每隔 1 秒在螢幕上列印一次單詞 Hello
。我們的目標是在使用者單擊停止列印
按鈕時停止間隔。
我們在 HTML 文件中建立了一個帶有 onClick
屬性的按鈕。當使用者單擊此按鈕時,此屬性將執行 stopInterval()
函式。
我們的整個 JavaScript 程式碼將放在 index.js
檔案中,我們將使用 script
標記將該檔案連結到我們的 HTML 文件,如下所示。
<body>
<button onclick="stopInterval()">Stop Printing</button>
<script src="index.js"></script>
</body>
然後我們必須在 JavaScript 檔案中建立一個變數 intervalID
和兩個函式 showText()
和 stopInterval()
。
在 showText()
函式中,我們將首先建立一個 h1
標籤,然後將其儲存在 text
變數中。接下來,我們將使用 innerHTML
屬性將文字 Hello
新增到 text
變數中。
最後,我們將把 text
新增到 HTML 文件的 body
。
var intervalID;
function showText()
{
var text = document.createElement('h1');
text.innerHTML = "Hello";
document.body.appendChild(text);
}
function stopInterval(){
console.log("stopping the interval...")
clearInterval(intervalID);
}
intervalID = setInterval(showText, 1000);
在 stopInterval()
函式中,我們將首先記錄一條語句 stopping the interval...
,它將告訴你按下了停止按鈕。
然後我們將使用 JavaScript 中的內建函式 clearInterval()
並傳遞我們建立的 intervalID
變數。
最後,我們將呼叫 setInterval()
函式,然後傳遞我們建立的 showText
函式和 1000
毫秒的時間延遲,即 1 秒。
每當我們呼叫 setInterval()
函式時都會建立一個 ID,並將該 ID 儲存在 intervalID
變數中。當我們需要停止間隔時,這個 ID 會派上用場。
在這裡,setInterval()
函式將在頁面載入後立即呼叫,你將看到文字 Hello
列印在螢幕上。你可以在想要停止間隔時按停止按鈕。
請檢視上圖以檢視我們編寫的程式碼的輸出。