JavaScript setTimeout and setInterval Function

setTimeout() function
setInterval() function

In the ECMAScript, setTimeout(func, time) and setInterval(func,time) are two quite similar functions. They are timed to perform a duty. In this lesson, I am going to discuss each of these functions in turn.

1. setTimeout() function

The setTimeout(func, delay) function establishes a millisecond 'delay' time period, when this time period passes the func function will be called only one time.

Note: 1 second = 1000 miliseconds

The Syntax:

setTimeout(func, delay)

func: This function will be called after 'delay' milliseconds.
delay: delay time period (in milisecond)

Below is the simple example with the setTimeout() function. 3 seconds after the use clicks "Show greeting", a greeting will display.

setTimeout-example.html

<!DOCTYPE html>
<html>
   <head>
      <title>setTimeout function</title>
      <script type="text/javascript">
         function greeting()  {
              alert("Hello Everyone!");
         }
         function startAction()  {
            setTimeout(greeting, 3000); // 3 seconds.
         }
      </script>
   </head>
   <body>
      <h2>setTimeout Function</h2>
      <button onclick="startAction()">Show greeting</button>
   </body>
</html>

Another example with the setTimeout() function, you can run this example on the NodeJS environment:

setTimeout-example.js

console.log("3");
console.log("2");
console.log("1");
console.log("Call setTimeout!");

setTimeout( function() {
  console.log("Hello Everyone!");
}, 3000); // 3 seconds

console.log("End!");

clearTimeout()

Suppose you call the setTimeout() function to schedule to perform a task, while the task is not started performing, you can cancel that task by calling the clearTimeout() function.

clearTimeout-example.html

<!DOCTYPE html>
<html>
   <head>
      <title>clearTimeout function</title>
      <script type="text/javascript">
         var myTask = null;
         function greeting()  {
              alert("Hello Everyone!");
              myTask = null;
         }
         function startAction()  {
            if(!myTask) {
               myTask = setTimeout(greeting, 3000); // 3 seconds.
            }
         }
         function cancelAction()  {
            if(myTask)  {
               clearTimeout(myTask);
               myTask = null;
            }
         }
      </script>
   </head>
   <body>
      <h2>setTimeout() &amp; clearTimeout() Function</h2> 
      <button onclick="startAction()">Show greeting</button>
      <button onclick="cancelAction()">Cancel</button>
   </body>
</html>

2. setInterval() function

The setInterval(func, delay) function establishes a milisecond 'delay' time period. After each milisecond 'delay', the func function is called.

Syntax:

setInterval(func, delay)

func: This function will be called after each millisecond 'delay' time period.
delay: Delay time period (in milisecond)

Below is a simple example with the setInterval() function.3 seconds after the user clicks the "Show greeting" button, a greeting will display, and it will display again after 3 seconds, ..

setInterval-example.html

<!DOCTYPE html>
<html>
   <head>
      <title>setInterval function</title>
      <script type="text/javascript">
         function greeting()  {
              alert("Hello Everyone!");
         }
         function startAction()  {
              setInterval(greeting, 3000); // 3 seconds.
         }
      </script>
   </head>
   <body>
      <h2>setInterval Function</h2> 
      <button onclick="startAction()">Show greeting</button>
   </body>
</html>

Another example with the setInterval() function, you can run this example on the NodeJS environment:

setInterval-example.js

console.log("3");
console.log("2");
console.log("1");
console.log("Call setInterval!");

setInterval( function() {
   console.log("Hello Everyone!");
}, 3000); // 3 seconds

console.log("End!");

clearInterval()

Suppose you call the setInterval() function to schedule to perform a task, you can cancel that task by calling the clearInterval() function.

clearInterval-example.html

<!DOCTYPE html>
<html>
   <head>
      <title>clearInterval function</title>
      <script type="text/javascript">
         var myTask = null;
         function greeting()  {
              alert("Hello Everyone!");
         }
         function startAction()  {
              if(!myTask)  {
                  myTask = setInterval(greeting, 3000); // 3 seconds.
              }
         }
         function cancelAction()  {
              if(myTask) {
                 clearInterval(myTask);
                 myTask = null;
              }
         }
      </script>
   </head>
   <body>
      <h2>setInterval() &amp; clearInterval() Function</h2>

      <button onclick="startAction()">Show greeting</button>
      <button onclick="cancelAction()">Cancel</button>
   </body>
</html>

ECMAScript, Javascript Tutorials

Maybe you are interested

These are online courses outside the o7planning website that we introduced, which may include free or discounted courses.

JavaScript setTimeout and setInterval Function

1. setTimeout() function

2. setInterval() function

ECMAScript, Javascript Tutorials

ECMAScript, Javascript Tutorials

Newest Articles