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 - http://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 in <table> to create table header cell?
<thead> <th> <td>
<table><tr>
  <th>Title 1</th>
  <th>Title 2</th>
</tr></table>
Which CSS property sets the distance between lines?
line-height word-spacing margin
.some_class {
  line-height: 150%;
}
Which function opens a new browser window.
alert() confirm() open()
document.getElementById("id_button").onclick = function(){
  window.open("http://coursesweb.net/");
}
Indicate the PHP function that returns an array with names of the files and folders inside a directory.
mkdir() scandir() readdir()
$ar_dir = scandir("dir_name");
var_export($ar_dir);
setTimeout and setInterval in JavaScript

Last accessed pages

  1. PHP PDO - Select query, fetch (18654)
  2. PHP MySQL - INSERT INTO (9450)
  3. PHP-MySQL free course, online tutorials PHP MySQL code (43599)
  4. Insert, Select and Update NULL value in MySQL (21003)
  5. Qwop (65499)

Popular pages this month

  1. Qwop (2997)
  2. Get Attribute (ID, Class, Name, Title, Src) with jQuery (2372)
  3. Get the value of the selected /checked checkboxes in a form (1497)
  4. Insert, Select and Update NULL value in MySQL (1341)
  5. Add, Change, and Remove Attributes with jQuery (1225)