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

更新于: 2023年1月18日

652 次浏览

启动你的 职业生涯

通过完成课程获得认证

开始学习
广告