Hello there my friend & fellow coder,
In this blog post, you’re going to discover exactly how to create a single timer in JavaScript.
So without further ado, let’s get started…
Single Timer
As the name says, a single timer is a timer that only executes once. In JavaScript, we don’t really use the term ‘single timer’ but instead it’s called a ‘timeout’.
So how do you create a timeout?
To create a timeout, you call the function with the name ‘setTimeout’. Now, this is not the end, because this function also takes at least 2 kinds of arguments, these are…
- handler – This is the function handler that gets called once the timeout gets executed. (This is often called a ‘callBack’)
- timeout – This is the number of milliseconds that it will take before the timeout elapses and the previous ‘callback’ handler gets executed.
Now I know that this sounds pretty cool through text, but let’s actually take a look at a piece of code that showcases the example explained above.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Amazing Timer</title>
</head>
<body>
<script src="script.js"></script>
</body>
</html>function sayHello() {
console.log("Hello There My friend :)")
}
const seconds = 3 * 1000 // This converts the milliseconds into seconds.
setTimeout(sayHello, seconds)Now once you run this code in your browser and watch the console screen. You should see the following message appear after 3 seconds.
Now, this example is of course, pretty basic and generic. So let’s add some spice by making the timeout run whenever we click a button on the screen, and let’s make it so that we can adjust the timeout seconds with an input field.
To achieve this, let’s add the following html and JavaScript
<input type="number" id="seconds" value="3"> <button id="timerButton">Click Me For Fun :)</button>
function sayHello() {
console.log("Hello There My friend :)")
}
const timeInput = document.querySelector('#seconds')
const timerBtn = document.querySelector('#timerButton')
timerBtn.onclick = () => {
const seconds = parseInt(timeInput.value) * 1000
setTimeout(sayHello, seconds)
}Assignment Take the code above and make your project out of it.
So as you can see, it’s pretty easy to create a quick timeout timer and even make a little project around it, I hope this post was useful to you and that you learned from it as well.
Your friend,
Michiel Arkema
Oh and btw, and I recently opened my first-ever coaching program to the public and I’m super excited about it. That’s why I’ve decided to allow the first 5 people who join to get FREE coaching, no strings attached.
You check out the program here: https://michielarkema.com/software-developer-accelerator
