dark

How to Set Time Delay in JavaScript

How to Set Time Delay in JavaScript

Have you ever encountered a situation where you needed to delay the execution of a certain function or action in JavaScript? Perhaps you needed to wait for an API response, or you wanted to create a slideshow with a timed transition between slides. Whatever the reason, setting a time delay in JavaScript can be incredibly useful. In this tutorial, you will learn how to set time delays in JavaScript using two different methods.

Method 1: setTimeout()

The first method involves using the setTimeout() function. This function allows you to execute a certain block of code after a specified amount of time has passed. To use it, first create a function that you want to delay. For example, let’s say you want to display an alert message after 5 seconds:

function showAlert() {
  alert("Hello, world!");
}

Next, use the setTimeout() function to delay the execution of the function. The setTimeout() function takes two arguments: the function you want to execute, and the amount of time you want to delay it by (in milliseconds). In this case, we want to delay the showAlert() function by 5000 milliseconds (which is equivalent to 5 seconds):

setTimeout(showAlert, 5000);

When the setTimeout() function is called, it will wait for 5 seconds before executing the showAlert() function.

Method 2: setInterval()

The second method involves using the setInterval() function. This function allows you to execute a certain block of code repeatedly at a specified interval. To use it, first create a function that you want to execute repeatedly. For example, let’s say you want to display the current time every second:

function displayTime() {
  var currentTime = new Date();
  console.log(currentTime);
}

Then, use the setInterval() function to execute the function repeatedly. The setInterval() function takes two arguments: the function you want to execute, and the interval at which you want to execute it (in milliseconds). In this case, we want to execute the displayTime() function every 1000 milliseconds (which is equivalent to 1 second):

setInterval(displayTime, 1000);

When the setInterval() function is called, it will execute the displayTime() function every second.

Setting time delays in JavaScript is a powerful tool that can be used in a variety of situations. Whether you need to wait for an API response or create a timed slideshow, the setTimeout() and setInterval() functions provide versatile options for managing time in your code.

Related tutorials