HTML, CSS, JavaScript Tutorial

JavaScript Window method: setInterval()

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, …)

Parameter	Required / Optional	Description
function	Required	Function to be evaluated
milliseconds	Required	Interval (in milliseconds) between consecutive executions (if less than 10 then defaulted to 10)
param1, param2, …	Optional	Additional parameters passed to function

EXAMPLE:

HTML USED IN THIS EXAMPLE:

<!DOCTYPE html>
<html> <!-- Copyright (c) Nematrian Limited 2018 -->
<head></head>
<body>
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>

<script>
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 

  InitialiseVariables();
  if (InsufficientSlideShowMarkup()) { return; }
  StartProgressBar();

  // 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() {
    RestartTask();
    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
    ++(CurrentTimeStepValue);
    PercentageValueObject.innerHTML = 100 * CurrentTimeStepValue / MaxTimeStepValue;
    ProgressBarObject.value = CurrentTimeStepValue;
    if (CurrentTimeStepValue >= MaxTimeStepValue) {
      clearInterval(ProgressBarTimerID); }
  }
}
</script>

</body>
</html>

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

Desktop view | Switch to Mobile