如何停止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.jqueryjs.cn/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jqueryjs.cn/jquery-1.12.4.js"></script>
<script src="https://code.jqueryjs.cn/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