JavaScript Time Function

JavaScript Time Function – setTimeout() & setInterval() | Functions called timers to repeat or postpone the execution of another function. Instead of being handled by JavaScript natively, they are controlled by browsers (the window interface) and Node.js (the global object). There are two types of time functions in JavaScript:-

• setTimeout()
• setInterval

JavaScript Time Function – setTimeout()

After the length of time you choose, the setTimeout() method runs a block of code. A single instance of the method’s code is run.

JavaScript’s standard setTimeout() syntax is:-
setTimeout(function, milliseconds);

Let’s look at a few examples to understand what the setTimeout() function, a time function in JavaScript, does.

function greet() {
  console.log("Hello");
}

setTimeout(greet, 3000);
console.log("Show this message.");

Output:-

Show this message.
Hello

The greet() function is called by the setTimeout() method in the program above after 3000 milliseconds (3 seconds). As a result, the application only shows the text “Hello”  once after three seconds.

The setTimeout() method can be helpful when you wish to run a block of code only once after a certain amount of time. For instance, show the user a message after a predetermined amount of time.

// program to display time every 3 seconds
function showTime() {

  // new date and time
  let dateTime = new Date();

  // current local time
  let time = dateTime.toLocaleTimeString();

  console.log(time);

  // display the time after 3 seconds
  setTimeout(showTime, 3000);
}

// calling the function
showTime();

Output:-

10:28:20
10:28:23
10:28:26
10:28:29
10:28:32
10:28:35
10:28:38

The application mentioned above updates the time every three seconds. After the time period, the setTimeout() method only calls the procedure once (here, 3 seconds). However, because the function in the program, as mentioned above, is calling itself, the time is displayed every three seconds. This program is perpetual (until the memory runs out).

It’s preferable to utilize the setInterval() method if you need to run a function more than once.

JavaScript Time Function – setInterval()

The setInterval() method repeats a code block at each specified timing event.

JavaScript’s standard setInterval syntax is:-
setInterval(function, milliseconds);

Let’s look at a few examples to understand what the setInterval() function, a time function in JavaScript, does.

// program to display a text using setInterval method
function greet() {
  console.log("Hi");
}

setInterval(greet, 1000);

Output:-

Hi
Hi
Hi
Hi

Every 1000 milliseconds in the software above, the setInterval() method invokes the greet() function (1 second). As a result, the application updates the word “Hi” every second.

Using the setInterval() method, you can repeat a code numerous times. As in displaying a message at predetermined intervals.

// program to display time every 5 seconds
function showTime() {
  // new date and time
  let dateTime = new Date();

  // current local time
  let time = dateTime.toLocaleTimeString();

  console.log(time);
}

let display = setInterval(showTime, 5000);

Output:-

10:33:31
10:33:36
10:33:41
10:33:46
10:33:51

The application mentioned above updates the time once every five seconds. The current date and time are provided via the new Date(). The current time is returned by toLocaleTimeString() as well.

Note that timers are employed to postpone or repeat the performance of other activities. Every day, people use timers ranging from Pomodoro clocks to meditation countdowns to less apparent features like background images that change every few seconds. Understanding how these processes operate can help you better meet today’s market’s expectations.

If you enjoyed this post, share it with your friends. Do you want to share more information about the topic discussed above or do you find anything incorrect? Let us know in the comments. Thank you!

Search