setTimeout and setInterval - Calling functions with parameters

These two JavaScript functions: setTimeout() and setInterval() are especially used in scripts with motion effects, and working with time intervals.
- What do setTimeout() and setInterval()? They can determine the execution of a function at specified time-intervals.

Here is the general syntax of using them:
setTimeout("function_name()", milliseconds)
And:
setInterval("function_name()", milliseconds)
- "function_name()" - a string with the function that will be called.
- "milliseconds" - is a number of milliseconds representing the time-interval that the function will be called.

Although they may seem similar, the difference between them is quite important. - Only the "setInterval" calls the function repeatedly. The "setTimeout" calls the function only once, after waiting a specified number of milliseconds.

Here's two examples with the same function. In the first example it is used the "setTimeout()"; in the seccond example it is used the "setInterval()". The function "functie()" increments the value of a variable, then displays it into a HTML element.

1. With setTimeout

<div id="id_tag">Here will be displayed the value added by JavaScript</div>

<script type="text/javascript">
var nr = 0;        // variabile to be incremented

// function that will be called
function functie() {
  nr++;         // increments the value with one unit
  document.getElementById('id_tag').innerHTML = nr;      // adds the value into the HTML tag with id="id_tag"
}

// Calls the function after 2 seconds (2000 milliseconds)
setTimeout("functie()", 2000);
</script>
- Demo. Click on and wait 2 seconds.

Here will be displayed the value added by JavaScript

2. With setInterval

<div id="id_tag">Here will be displayed the value added by JavaScript</div>

<script type="text/javascript">
var nr = 0;        // variabile to be incremented

// function that will be called
function functie() {
  nr++;         // increments the value with one unit
  document.getElementById('id_tag').innerHTML = nr;      // adds the value into the HTML tag with id="id_tag"
}

// Calls the function every 2 seconds (2000 milliseconds)
setInterval("functie()", 2000);
</script>
- Demo. Click on and see the result after 2 seconds.

Here will be displayed the value added by JavaScript

- Notice the differences between these two examples. In the first example, with "setTimeout()", the function is executed only once, after 2 seconds. But in the seccond example the function is executed over and over again, every 2 seconds.

• If the setTimeout() is included into the same function that is called, it can be created an effect of auto-calling that will execute the function continuously.
To execute a function continuously with "setTimeout", add the setTimeout() into the body of that function, than calls it with setTimeout.
Here's an example.

3. Using setTimeout() to execute a function various times. And a button to stop the execution

<div id="id_tag">Here will be displayed the value added by JavaScript</div>
Button to stop: <button onclick="functie(0)">Stop</button>

<script type="text/javascript">
var nr = 0;         // variabile to be incremented
var stp = 1;        // to determine when to stop the execution

// function that will be called by setTimeout
function functie(parm) {
  // if "parm" is 0 (when the Stop button is clicked), sets stp = 0
  // will determine to not be executed the code of the next "if()"
  if(parm==0) { stp = 0; }

  // this code is executed only if stp is 1
  if(stp==1) {
    nr++;         // increments the value with one unit
    document.getElementById('id_tag').innerHTML = nr;    // adds the value into the HTML tag with id=&quot;id_tag&quot;

    // Auto-calls the function after 1.5 seconds (value 1 for parameter)
    setTimeout("functie(1)", 1500);
  }
}

// calls the function after 1.5 seconds (value 1 for parameter)
setTimeout("functie(1)", 1500);
</script>
- To see the result, Click on , and wait more than 2 seconds, than click .

Here will be displayed the value added by JavaScript

setTimeout and setInterval - Calling functions with parameters

If the function that will be called contains parameters, you must add values for those arguments, in the string added in setTimeout() or setInterval().
Be aware of the value of the argument, if it is string, a number, or a value from a variable.
- If the argument is a value from a variable, the variable must be concatenated (between braces, with "+") to the string with the function that is called.

Some examples:
1. Calling a function with two arguments: a string, and a number.
setTimeout('function_name("a_string", 89)', 2000);
2. Calling a function with two arguments: a string, and a numeric value stored into a variable.
setInterval('function_name("a_string", '+ nr_var +')', 2000);
3. Calling a function with two arguments: a numeric and a string value, both from variables.
setInterval('function_name('+ nr_var +', "'+ string_var +'")', 2000);

Here's an example which will display an Alert window, with a string and a number that are stored in variables.
<script type="text/javascript">
// Variables that will be added as arguments to the function
var sir = 'JavaScript Course - https://coursesweb.net';
var nr2 = 8;

function set_alert(parm1, parm2) {
  // displays an alert window, with values from parameters
  alert(parm1+' - '+parm2);
}

// execute the function after 1.5 seconds, passing the values from variables
setTimeout("set_alert('"+sir+"', "+nr2+")", 1500);
</script>
To see the result, click:

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag is used to add definition lists into a <dl> element?
<dt> <dd> <li>
<dl>
 <dt>HTML</dt>
  <dd> - Hyper Text Markup Language</dd>
  <dd> - Language for web pages</dd>
</dl>
Which CSS property can hide an element on page, letting an empty space in its place?
display position visibility
#id {
  visibility: hidden;
}
Click on the event which is triggered when the mouse clicks on an object.
onclick onmouseover onfocus
document.getElementById("id").onclick = function(){
  alert("http://CoursesWeb.net/");
}
Indicate the PHP variable that contains the contents of both $_GET, $_POST, and $_COOKIE arrays.
$_SESSION $_GET $_REQUEST
if(isset($_REQUEST["id"])) {
  echo $_REQUEST["id"];
}
setTimeout and setInterval in JavaScript

Last accessed pages

  1. Add, Change, and Remove Attributes with jQuery (35999)
  2. Select in MySQL, Output results in HTML Table (3789)
  3. jQuery Drag and Drop Rows between two similar Tables (6875)
  4. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (8371)
  5. Add Pause in JavaScript script (9348)

Popular pages this month

  1. Read Excel file data in PHP - PhpExcelReader (443)
  2. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (351)
  3. Register and show online users and visitors (319)
  4. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (300)
  5. Insert, Select and Update NULL value in MySQL (214)