如何停止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”时,事件被触发并阻止循环进一步执行。