HTML / CSS / JavaScript Tutorial

JavaScript Window method: setInterval()

[this page | pdf | back links]

The setInterval() method (when applied to Window objects in the JavaScript BOM) calls a function or evaluates an expression at specified intervals (in milliseconds). It will continue calling the function until the clearInterval() method is called or until the window is closed.


It has the following syntax with the following parameters. It returns an id value (number) which is then used as the parameter for the clearInterval() method.


Note: use the setTimeout() method to execute the function only once.


window.setInterval(function, milliseconds, param1, param2, …)



Required / Optional




Function to be evaluated



Interval (in milliseconds) between consecutive executions (if less than 10 then defaulted to 10)

param1, param2, …


Additional parameters passed to function



<!DOCTYPE html>
<html> <!-- Copyright (c) Nematrian Limited 2018 -->
Usually a progress bar is updated as time progresses, often using JavaScript. The example below
mimics a task that repeats ad infinitem and shows the progress in numerical and
graphical form using &lt;span&gt; and &lt;progress&gt; elements:<br><br>

Fraction of time elapsed since task last started:<br>
- as a percentage: <span id="PercentageValue">0</span>%<br>
- as a &lt;progress&gt; element: <progress id="ProgressValue" value="0" max="100" style="width:40px"></progress><br><br>

window.addEventListener('load', UpdateTimeElapsed, false);

function UpdateTimeElapsed() {
  var ProgressBarTimerID = null // will contain setInterval() ID when starting progress bar
  var RestartTaskID = null //will contain setInterval() ID when repeatedly resetting progress bar
  var TimeStepSize = 500 // i.e. time step in milliseconds
  var MaxTimeStepValue = 10 // i.e. maximum number of time steps
  var OverallTime = TimeStepSize * MaxTimeStepValue // overall length of time taken to end of task  
  var CurrentTimeStepValue = 0 // i.e. the current step value
  var TimeBetweenRepeats = OverallTime * 1.25;
  var PercentageValueID = "PercentageValue" // will contain <div> element containing percentage value
  var ProgressBarID = "ProgressValue" // will contain <progress> element 
  var PercentageValueObject = null // will contain <div> element containing percentage value
  var ProgressBarObject = null // will contain <progress> element 

  if (InsufficientSlideShowMarkup()) { return; }

  // functions used above

  function InitialiseVariables() {
    PercentageValueObject = (document.getElementById(PercentageValueID) ? document.getElementById(PercentageValueID) : null);
    ProgressBarObject = (document.getElementById(ProgressBarID) ? document.getElementById(ProgressBarID) : null);
    CurrentTimeStepValue = 0
    PercentageValueObject.innerHTML = 100 * CurrentTimeStepValue / MaxTimeStepValue;
    ProgressBarObject.value = CurrentTimeStepValue;
    ProgressBarObject.max = MaxTimeStepValue;

  function InsufficientSlideShowMarkup() { // checks relevant HTML elements are present
    if (!PercentageValueObject) { return true; }
    if (!ProgressBarObject) { return true; } 
    return false;

  function StartProgressBar() {
    setInterval(RestartTask, TimeBetweenRepeats);

  function RestartTask() {
    CurrentTimeStepValue = 0
    PercentageValueObject.innerHTML = CurrentTimeStepValue;
    ProgressBarObject.value = CurrentTimeStepValue;
    ProgressBarObject.max = MaxTimeStepValue;
    ProgressBarTimerID = setInterval(TransitionValue, TimeStepSize);

  function TransitionValue() { // i.e. increments the time shown in the <div> and <progress> elements
    PercentageValueObject.innerHTML = 100 * CurrentTimeStepValue / MaxTimeStepValue;
    ProgressBarObject.value = CurrentTimeStepValue;
    if (CurrentTimeStepValue >= MaxTimeStepValue) {
      clearInterval(ProgressBarTimerID); }


Contents | Prev | Next | JavaScript DOM (and BOM)

Desktop view | Switch to Mobile