Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to stop the loop for JavaScript scroll down?
JavaScript scroll down loops can be extremely annoying and disruptive to a web page. Fortunately, it is relatively easy to stop the loop if you know what steps to take. In this article, we will discuss how to stop the JavaScript scroll down loop so that your website visitors don't have to keep scrolling endlessly. We'll also provide some tips on preventing these types of issues in the future.
JavaScript method ScrollBy() scrolls the web page to the specific number of pixels.
The clearInterval()in JavaScript
The clearInterval() is a JavaScript function that is used to stop the execution of a setInterval() function. This can be useful when you want to prevent the interval from continuing after certain conditions have been met, or if you no longer need it to run. When invoked, clearInterval() takes in an argument of the ID returned by setInterval().
Syntax
Following is the syntax for clearInterval()
clearInterval(intervalId)
Example
In the following example we running the script by using 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>
When the script gets executed, it will generate an output consisting of a loop starting from "0" that will execute until the number reaches "10" on the webpage. It will stop at "10" because the event gets triggered.
Example
Let’s look into the another example where we are using the clearInterval() method.
<!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>
On running the above script, the event gets triggered, which starts the loop based on the condition used in the script, and it stops the loop when the clearInterval() condition is triggered.
Break in JavaScript
The break statement terminates a loop or switch. It exits the switch block in a switch. This prevents the switch from running any additional code. It exits a loop and continues running the code after the loop when one is present.
Syntax
Following is the syntax for break
break;
Example
In the following example we are running the script by using the break condition to stop the loop.
<!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>
When the script gets executed, it will generate an output consisting of a number that is printed starting from "0" and ending at "8" on the webpage. as the event gets triggered when the loop reaches the number "8."
Example
Let’s look into the another example where we are using the break condition to stop the loop.
<!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>
On running the above script, it will generate an output consisting of a loop that starts at “0” and stops at “5” on the webpage. When the loop reaches the "5", the event gets triggered and stops the loop from executing further.
543 Views
