call-javascript-function-after-specific-time-period

How to call javascript function after specific time period

How to call javascript function after specific time period

In this section we will go over through the way to call javascript function after specific time period. The functionality can very be useful in a scenario where we wanted to tell users to perform some action even if the page or application is ideal for some time. We will look into setInterval, clearInterval, setTimeout, clearTimeout etc

There are two types of function available in JavaScript.

  1. setInterval()  : This will call the function on every specified time interval. This means this will call the same function on specified time interval.
  2. setTimeout() : This will call the function only once, after waiting for specified time.

Lets use the real time example to understand the need of this function in a practical way. Suppose i have a some reach user interface application. The session time out of my application is 30 minutes.  I want to tell my users to perform some action on the page if the application is ideal from last 25 minutes. So I want to tell my users before 5 minutes of the actual time out. In this scenario we can use java script function setInterval to call function after given specified time period.

The basic syntax of  setInterval  is as below.

window.setInterval(java script function, time interval in milliseconds);

Below is a simple java script code which will call java script function fnInterval() on every 3 seconds. Just copy paste the below code on you page and have a look. It will prompt alert message on every 3 seconds.

function fnInterval()
{
    alert('function called after 3 sec.');
}
window.setInterval(fnInterval, 3000);

setInterval

 

Please note down here that the setInterval function require time in milliseconds.

Now the above code will give the alert on every 3 seconds. How can i stop this to call on and on? There is a java script function called clearInterval().  The function accept the variable as an argument. 

The basic syntax of  clearInterval is as below.

window.clearInterval(variable);

Lets go through the basic example of clearinterval function.In the below example I am calling clearinterval  function with variable MyTimer. This will immediately stop the function for further execution.

<html>
<head>
<title>TechnoThirsty Example</title>
<script type="text/javascript">

    var MyTimer = setInterval(fnInterval, 3000);

    function fnInterval() {
      alert('function called after 3 sec.');
    }

</script>
</head>
   <body>
      <button onclick="clearInterval(MyTimer)">Stop</button>
   </body>
</html>

 

The setTimeout function is same as above except it will only execute after waiting for specified time. The function is useful where we just want to execute once not on every specified time interval.

The basic syntax of  setTimeout is as below.

window.setTimeout(java script function, time in milliseconds);

To have a better understanding of the above both function just copy paste below line of code and have a look at the alert messages. You can note down that the setTimeout function is only called once while setInterval is executing on every specified time interval.

function fnInterval() {
     alert('The interval function called.');
}

function fnTimeOut() {
     alert('The timeout function called.');
}

window.setInterval(fnInterval, 3000);
window.setTimeout(fnTimeOut,5000);

 

We can also stop the setTimeout function to execute using clearTimeout function.

The basic syntax of clearTimeout  is as below.

window.clearTimeout(variable);

We can use this function same way we have used clearInterval().

Hope you enjoyed my post of call javascript function after specific time period.

Leave a Reply