A timer function in JavaScript is created to have execution of a task at a later time. The timer does the execution of a program automatically after waiting some time that is mentioned with the timer. The interval between different tasks could be regular or irregular. This is useful when you have to delay execution of a task because some event, page loading, or trigger is happening at the moment.
One of the examples you see in daily life of a timer function is displayed on the banners of websites. You might have seen that the ads in banners change after every few seconds. The advertisement is changed after regular intervals to show you different ads while consuming less space on the website.
Hire JS developers to have access to two different functions, setInterval() and setTimeout() and both of them are used to delay code execution until you want. Similarly, a timer function can also help execute two or more tasks simultaneously by delaying one and then executing both codes at a time.
Creating a timer in Javascript
First using only HTML we will be creating an interface for the code. So that, when you run this code in your browser you actually see something on the screen.
| <form name=”form_main”> <div> <span id=”hour”>00</span>:<span id=”minute”>00</span>:<span id=”second”>00</span>:<span id=”millisecond”>000</span> </div> <br /> <button type=”button” name=”start”>start</button> <button type=”button” name=”pause”>pause</button> <button type=”button” name=”reset”>reset</button> </form> |
Here the span is used to display the information and the buttons are controlling the timer function’s functionality.
Once our interface is ready we can work on the JS code. While creating is super easy and simple, but to implement it into your business application, we highly recommend you to JS developers and professionals. Have a look at the code.
| “use strict”; let hour = 0; let minute = 0; let second = 0; let millisecond = 0; let cron; document.form_main.start.onclick = () => start(); document.form_main.pause.onclick = () => pause(); document.form_main.reset.onclick = () => reset(); |
Here we have defined the variables that will be controlling the timer. Then these buttons are attached to the buttons defined above in the HTML part of code so that the code activates once the buttons are clicked.
Now it is time to create the main function which delays the code execution.
| function start() { pause(); cron = setInterval(() => { timer(); }, 10); } function pause() { clearInterval(cron); } function reset() { hour = 0; minute = 0; second = 0; millisecond = 0; document.getElementById(‘hour’).innerText = ’00’; document.getElementById(‘minute’).innerText = ’00’; document.getElementById(‘second’).innerText = ’00’; document.getElementById(‘millisecond’).innerText = ‘000’; } |
For now, the interval is set to 10 milliseconds
Clearing anything before the function execution starts is important. It is to prevent any background process happening before executing the code.
Now, let’s create a reset function. To set it back to zero we have gone for a manual approach here.
| function timer() { if ((millisecond += 10) == 1000) { millisecond = 0; second++; } if (second == 60) { second = 0; minute++; } if (minute == 60) { minute = 0; hour++; } document.getElementById(‘hour’).innerText = returnData(hour); document.getElementById(‘minute’).innerText = returnData(minute); document.getElementById(‘second’).innerText = returnData(second); document.getElementById(‘millisecond’).innerText = returnData(millisecond); } function returnData(input) { return input > 10 ? input : `0${input}` } |
The start function is the main part of the timer function which checks the time that has passed since the start of execution of the program. The function logic working is explain following:
If the millisecond variable, starting from 10, when added is equal to 1000, that means 1 second has passed. In that case we reset the variable and set it to 1 sec. If the second variable is equal to 60 then a minute has passed so then we reset the variable and set it to 1 minute. Similarly if 60 minutes have passed we reset the variable and set it to 1 hour.
For the javascript developer for hire who just wants to learn JS, this is one of the most important lessons not to miss. But if you are planning to make amends to the code of your business software, then hire Js developers and get the work done by professionals. If you want to hire JS developers remotely for such tasks, then hiring off-shore developers is the best option.
