Differences

This shows you the differences between two versions of the page.

--- devwiki:javascript [2022/07/31 05:53] – [array operation] ying
+++ devwiki:javascript [2024/02/03 15:18] (current) – [Timer operation] ying
@@ Line 79: / Line 79: @@
 }
 </code>
+====== Timer operation ======
+  * If the timer is intended to run indefinitely and you want a continuous countdown, the setInterval method is a simple and suitable choice. To stop, you need to explicitly clear it using clearInterval.
+  * If you want more control over the execution, especially if there are additional conditions for stopping or restarting the timer, the setTimeout recursive approach might be preferred.
+<code javascript>
+let timer = 5 * 60; // Convert minutes to seconds
+const timerIndicator = document.getElementById('timerIndicator');
+// method a: Display count down, bad: will still run after time=0
+setInterval(function() {
+    timer--;
+    timerIndicator.textContent = formatTimer(timer);
+    if (timer <= 0) {
+        alert('Form submit');
+    }
+}, 1000);
+// method b: will not run after time=0
+function updateTimer() {
+    timer--;
+    timerIndicator.textContent = formatTimer(timer);
+    if (timer <= 0) {
+        alert('Form submit');
+    } else {
+        setTimeout(updateTimer, 1000);
+    }
+}
+updateTimer(); // Start the timer.
+// end of method b
+function formatTimer(seconds) {
+    const minutes = Math.floor(seconds / 60);
+    const remainingSeconds = seconds % 60;
+    return `${String(minutes).padStart(2, '0')}:${String(remainingSeconds).padStart(2, '0')}`;
+}
+</code>
 ====== HTML5 and Javscript ======