learn about setting timers and intervals

Aman0509 · Aman0509 · commit fc3db90d21ba · 2023-04-27T00:28:57.000+05:30
diff --git a/Advanced-DOM-APIs/README.md b/Advanced-DOM-APIs/README.md
@@ -8,6 +8,7 @@
 | [Handling Scrolling](#handling-scrolling) |
 | [Working with `<template>` tag](#working-with-template-tag) |
 | [Loading Script Dynamically](#loading-script-dynamically) |
+| [Setting Timers and Intervals](#setting-timers-and-intervals) |
 
 Below topics will be covered and for its practical application, [Planner Project](project_planner/) will be used as reference where concept of classes and functions are demonstrated:
 
@@ -229,3 +230,41 @@ In this example, we add an event listener for the `load` event on the `script` e
 > **Note**
 >
 > Adding scripts dynamically can be a powerful feature, but it's important to use it carefully. If you're dynamically rendering user-created scripts, you need to be especially cautious, as this could make your website vulnerable to attacks like cross-site scripting. This type of attack involves injecting malicious code into your website's code, and we'll be discussing it in more detail in the security section later in the course. To avoid these kinds of attacks, it's crucial that you don't dynamically add a script based on user-entered content, or if you must do so, be sure to validate and sanitize the content thoroughly before executing it.
+
+## Setting Timers and Intervals
+
+You can use timers and intervals to execute code after a set amount of time has elapsed. Here's how you can set a timer and an interval using the DOM:
+
+### Setting a timer using [`setTimeout`](https://developer.mozilla.org/en-US/docs/Web/API/setTimeout)
+
+```javascript
+// Set a timer to execute some code after 3 seconds
+const timer = setTimeout(() => {
+  // Code to be executed after 3 seconds
+}, 3000);
+```
+
+In this example, `setTimeout` is used to set a timer that will execute the function after 3 seconds (3000 milliseconds) have elapsed. The function can contain any code you want to execute after the specified time.
+
+### Setting an interval using [`setInterval`](https://developer.mozilla.org/en-US/docs/Web/API/setInterval)
+
+```javascript
+// Set an interval to execute some code every 2 seconds
+const interval = setInterval(() => {
+  // Code to be executed every 2 seconds
+}, 2000);
+```
+
+In this example, `setInterval` is used to set an interval that will execute the function every 2 seconds (2000 milliseconds). Again, the function can contain any code you want to execute at regular intervals.
+
+To clear a timer or interval, you can use the `clearTimeout` or `clearInterval` methods respectively. For example:
+
+```javascript
+// Clear the timer
+clearTimeout(timer);
+
+// Clear the interval
+clearInterval(interval);
+```
+
+In this example, `clearTimeout` is used to cancel the timer and prevent the code from executing after the specified time. `clearInterval` works similarly for intervals.
diff --git a/Advanced-DOM-APIs/project_planner/assets/scripts/analytics.js b/Advanced-DOM-APIs/project_planner/assets/scripts/analytics.js
@@ -1 +1,14 @@
-console.log("Starting some analysis...")
+// console.log("Starting some analysis...");
+
+// Demonstration of setInterval()
+
+const intervalId = setInterval(() => {
+  console.log("Starting some analysis...")
+}, 2000);
+
+document.getElementById('stop-analytics').addEventListener(
+  'click', () => {
+    clearInterval(intervalId);
+    // clearTimeout() will also work
+  }
+)
diff --git a/Advanced-DOM-APIs/project_planner/assets/scripts/app.js b/Advanced-DOM-APIs/project_planner/assets/scripts/app.js
@@ -158,7 +158,15 @@ class App {
 		const finishedProjectsList = new ProjectList('finished');
 		activeProjectsList.setSwitchHandlerFunction(finishedProjectsList.addProject.bind(finishedProjectsList));
 		finishedProjectsList.setSwitchHandlerFunction(activeProjectsList.addProject.bind(activeProjectsList));
-		document.getElementById('start-analytics').addEventListener('click', this.startAnalytics);
+
+		/*
+		This is an example of how JavaScript can execute code asynchronously via setTimeout() and setInterval(), a topic we haven't covered yet. When you set a timer in JavaScript, it won't pause the execution of your entire script. Instead, the browser registers the timer in the background and manages it, so your script can continue to run normally without interruption. When the timer expires, the browser will execute the registered function. It's important to understand that this process doesn't pause script execution, and the browser takes care of managing the timer in the background. This ensures that your script can continue to run without any pauses or disruptions.
+		*/
+		// document.getElementById('start-analytics').addEventListener('click', this.startAnalytics);
+		const timerId = setTimeout(this.startAnalytics, 3000);
+
+		// If you click on `Stop Analytics` button before 3 seconds, the action will not be happened
+		document.getElementById('stop-analytics').addEventListener('click', () => {clearTimeout(timerId);})
 	}
 
 	// This is just a random function to demonstrate about adding a JS dynamically on some event
diff --git a/Advanced-DOM-APIs/project_planner/index.html b/Advanced-DOM-APIs/project_planner/index.html
@@ -65,8 +65,11 @@ <h2>Book Hotel</h2>
       </ul>
     </section>
     <footer>
-      <button id="start-analytics">
+      <!-- <button id="start-analytics">
         Start Analytics!
+      </button> -->
+      <button id="stop-analytics">
+        Stop Analytics!
       </button>
     </footer>
   </body>
