timing

AzharAli-github · AzharAli-github · commit aecf69239334 · 2023-01-15T00:23:05.000+05:00
diff --git a/JavaScript/Advance/BOM/7.timing/images/js-logo.png b/JavaScript/Advance/BOM/7.timing/images/js-logo.png
diff --git a/JavaScript/Advance/BOM/7.timing/index.html b/JavaScript/Advance/BOM/7.timing/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>timing-events JS</title>
+    <link rel="shortcut icon" href="images/js-logo.png" type="image/x-icon">
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+    <h1>Timing events in JS</h1>
+    <h2>SetTimeout</h2>
+    <p id="textOne"></p>
+    <h2>ClearTimeout</h2>
+    <button onclick="DisplayTwo()">Start</button>
+    <button onclick="StopTwo()">Stop</button>
+    <p id="textTwo"></p>
+    <h2>SetInterval</h2>
+    <p id="textThree"></p>
+    <h2>ClearInterval</h2>
+    <button onclick="DisplayFour()">Start</button>
+    <button onclick="StopFour()">Stop</button>
+    <p id="textFour"></p>
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/JavaScript/Advance/BOM/7.timing/script.js b/JavaScript/Advance/BOM/7.timing/script.js
@@ -0,0 +1,56 @@
+/*
+    Timing in JavaScript adds interactivity to function that how much time will it take to load
+    a function, after how many time will the function display or clear:
+    We will discuss some of the timing constraints in JavaScript:
+    1. SetTimeout(function(){}, 1000()
+*/
+let textOne = document.getElementById('textOne');
+
+setTimeout(function DisplayOne() {
+    textOne.innerHTML = "Hi There!"
+}, 2000);
+
+// Now we will discuss the second method of timimg which is
+//     2. clearTimeOut(function(){}, 1000) : This is used for stoping the execution
+
+let textTwo = document.getElementById('textTwo');
+
+function DisplayTwo() {
+    x = setTimeout(function() {
+        textTwo.innerHTML = "Hello after Three Second!"
+    }, 3000);
+    return x;
+}
+
+function StopTwo() {
+    clearTimeout(x)
+    alert("You have stopped the operation")
+}
+
+// I loved working in the above code now next is..
+//  3. setInterval(function(){}, miliseconds)
+
+let textThree = document.getElementById('textThree');
+
+function DisplayThree() {
+    setInterval(function() {
+        textThree.innerHTML = "HELLO Example 3 here after 2 Seconds"
+    }, 2000)
+}
+DisplayThree();
+
+
+// Our Next Topic is clearInterval
+
+let textFour = document.getElementById('textFour');
+
+function DisplayFour() {
+    y = setInterval(function() {
+        textFour.innerHTML = "EXAMPLE FOUR HERE!";
+    }, 3000)
+}
+
+function StopFour() {
+    clearInterval(y);
+    alert("You have Stoped Example Four Operation!")
+}
diff --git a/JavaScript/Advance/BOM/7.timing/style.css b/JavaScript/Advance/BOM/7.timing/style.css
@@ -0,0 +1,11 @@
+h1 {
+    font-family: sans-serif;
+}
+
+h2 {
+    font-family: monospace;
+}
+
+p {
+    font-family: Arial, Helvetica, sans-serif;
+}
