如何停止JavaScript滾動迴圈?
JavaScript 滾動迴圈可能非常煩人和干擾網頁。幸運的是,如果您知道採取哪些步驟,停止迴圈相對容易。在本文中,我們將討論如何停止 JavaScript 滾動迴圈,以便您的網站訪問者不必無限期地滾動。我們還將提供一些關於將來如何防止此類問題的提示。
JavaScript 方法 ScrollBy() 將網頁滾動到特定數量的畫素。
JavaScript 中的 clearInterval()
clearInterval() 是一個 JavaScript 函式,用於停止 setInterval() 函式的執行。當您希望在滿足某些條件後阻止間隔繼續,或者不再需要它執行時,這很有用。呼叫時,clearInterval() 會接收 setInterval() 返回的 ID 作為引數。
語法
以下是 clearInterval() 的語法
clearInterval(intervalId)
示例
在下面的示例中,我們使用 clearInterval() 執行指令碼
<!DOCTYPE html>
<html>
<body>
<script>
var count = 0;
var scroll = setInterval(() => this.execute(), 10);
function execute() {
window.scrollBy(0,1000);
document.write(count)
if(count == 10) clearInterval(scroll);
count++;
}
</script>
</body>
</html>
當指令碼執行時,它將生成一個輸出,其中包含從“0”開始的迴圈,該迴圈將在網頁上執行,直到數字達到“10”。它將在“10”處停止,因為事件被觸發。
示例
讓我們看看另一個使用 clearInterval() 方法的示例。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<body>
<script>
var start = 0;
var limit = 200;
var scroll = setInterval(() => this.startScrollDown(), 20);
function startScrollDown() {
window.scrollBy(0, 1000);
document.write(start)
if (start == limit) clearInterval(scroll);
start++;
}
</script>
</body>
</html>
執行上述指令碼後,事件將被觸發,根據指令碼中使用的條件開始迴圈,並在觸發 clearInterval() 條件時停止迴圈。
JavaScript 中的 break
break 語句終止迴圈或 switch。它退出 switch 中的 switch 塊。這將阻止 switch 執行任何其他程式碼。當存在迴圈時,它退出迴圈並繼續執行迴圈後的程式碼。
語法
以下是 break 的語法
break;
示例
在下面的示例中,我們使用 break 條件執行指令碼以停止迴圈。
<!DOCTYPE html>
<html>
<title>stop loop</title>
<script>
let arr = [0,1,2,3,4,5,6,7,8,9];
for (let ele of arr) {
if (ele > 8) break;
document.write(ele);
}
</script>
</html>
當指令碼執行時,它將生成一個輸出,其中包含從“0”開始列印的數字,並在網頁上結束於“8”。因為當迴圈達到數字“8”時,事件被觸發。
示例
讓我們看看另一個使用 break 條件停止迴圈的示例。
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
let text = "";
let i = 0;
while (i < 9) {
text += i + "<br>";
i++;
if (i === 6) break;
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
執行上述指令碼後,它將生成一個輸出,其中包含一個從“0”開始並在網頁上停止於“5”的迴圈。當迴圈達到“5”時,事件被觸發並阻止迴圈進一步執行。
資料結構
網路
關係型資料庫管理系統
作業系統
Java
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP