Javascript How to use Timer Loop
Javascript Timer Class
We can make JavaScript functions run at a specified time or at a specified interval.
the setTimeout method allows us to execute the function we want after the specified period, and the setInterval method allows us to repeat the function at the specified intervals.
the setTimeout method
1 | window.setTimeout( function to run, milliseconds) |
It waits for the specified time in milliseconds, and then executes the specified function when that time expires. All methods described on this page belong to the window class and the window class is not written before the method names.
1 2 3 4 5 6 7 8 9 10 11 | <script> setTimeout(aaa,3000); function aaa() { document.getElementById("sonuc").innerHTML="times up"; } </script> |
In the example below, when the button is clicked, the setTimeout method is executed and the print function is enabled after 2 seconds.
1 2 3 4 5 6 7 8 9 10 11 | <script> function yazdir() { document.getElementById("sonuc").innerHTML="Times up"; } </script> <button onclick="setTimeout(yazdir, 2000)">Start Timer</button> |
we can use the clearTimeout method if we want to prevent this method from running after the setTimeout method is started and the countdown begins.
1 | window.clearTimeout(degiskenAdi); |
in the clearTimeout method, it is necessary to specify the value returned by the setTimeout method that is wanted to be stopped. For this reason, when the setTimeout method is executed, it is synchronized to a variable. Using this variable in the clearTimeout method, the corresponding setTimeout method is stopped.
1 | Var degisken1 = setTimeout(aaa, milliseconds); |
A setTimeout method used as above can be stopped without working as follows.
1 | clearTimeout(degisken1); |
Example: there are two buttons on our page. The first one is to run the setTimeout method and run the print function after 3 seconds. The second button will stop the scheduled process with the clearTimeout method. This means that after pressing the first button, the operation can be cancelled by pressing the second button within 3 seconds.
Create the first button as follows::
1 | <button onclick="degisken1 = setTimeout(yazdir, 3000)">Start Time</button> |
The second button should be like this also:
1 | <button onclick="clearTimeout(degisken1)">Stop</button> |
setInterval() method
Its use is like the setTimeout method. If it does, it runs the specified function continuously with intervals until the specified time.
1 | window.setInterval(fonksiyonAdi, milisaniye); |
In the following example, BBB will be called twice per second and will include a period in box1.
1 2 3 4 5 6 7 | setInterval(bbb, 500); function bbb() { document.getElementById("kutu1").innerHTML+="."; } |
Another example: let’s print the current time by updating it every second.
1 2 3 4 5 6 7 8 9 | setInterval(zamanGoster, 1000); function zamanGoster () { var saat = new Date(); document.getElementById("kutu1").innerHTML = saat.toLocaleTimeString(); } |
The clearInterval method is used to stop a scheduled function.
1 | window.clearInterval(degiskenAdi) |
it is used in the same way as the clearTimeout method. The variable to which the setInterval method is to be stopped is used.
1 | Var degisken1 = setInterval(bbb, 2000); |
A setInterval method executed in the form of,
1 | clearInterval(degisken1); |
it can be stopped in its form.
Example: let’s prepare two buttons that start and stop counting back from 100.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <script> var sayac=100; function say() { document.getElementById("kutu1").innerHTML=sayac; sayac--; } </script> <p id="kutu1"></p> <button onclick="degisken=setInterval(say, 1000)">Start/Devam</button> <button onclick="clearInterval(degisken)">Stop</button> |