如何停止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”時,事件被觸發並阻止迴圈進一步執行。

更新於: 2023年1月18日

652 次瀏覽

啟動你的 職業生涯

透過完成課程獲得認證

開始學習
廣告
© . All rights reserved.