These two JavaScript functions: setTimeout() and setInterval() are especially used in scripts with motion effects, and working with time intervals.
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.
Here's two examples with the same function. In the first example it is used setTimeout(); in the seccond example it is used the setInterval().
The function 'funName()' increments the value of a variable, then displays it into a HTML element.

Example with setTimeout

<h4>Example setTimeout</h4>
<p>Click on <button id='btn1'>Try it</button> and wait 1 second.</p>
<div id='id_tag'>Here will be displayed the value added by JavaScript</div>

<script>
var nr = 0; // variabile to be incremented

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

//when click on #btn1
document.getElementById('btn1').addEventListener('click', (ev)=>{
 // Calls the function after 1 second (1000 milliseconds)
 setTimeout('funName()', 1000);
});
</script>

Example with setInterval

<h4>Example setInterval</h4>
<p>Click on <button id='btn1'>Try it</button> and see the result after 1 second.</p>
<div id='id_tag'>Here will be displayed the value added by JavaScript</div>

<script>
var nr = 0; // variabile to be incremented

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

//when click on #btn1
document.getElementById('btn1').addEventListener('click', (ev)=>{
 // Calls the function every 1 second (1000 milliseconds)
 setInterval('funName()', 1000);
});
</script>

• 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 it into the body of that function, than calls the function with setTimeout().


Here's an example.

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

<h4>Example setTimeout() calls a function various times</h4>

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

<script>
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 funName(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 #id_tag

 // Auto-calls the function after 1 second (value 1 for parameter)
 setTimeout('funName(1)', 1000);
 }
}

// calls funName after 1 second (value 1 for parameter)
setTimeout('funName(1)', 1000);
</script>

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.
<h4>Example setTimeout with arguments from variables</h4>
<p>To see the result, click: <button id='btn1'>Try it</button> and wait 1 second.</p>

<script>
// Variables that will be added as arguments to the function
var sir = 'JavaScript Course - https://coursesweb.net/';
var nr2 = 10;

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

//when click on #btn1
document.getElementById('btn1').addEventListener('click', (ev)=>{
 //calls the function after 1.5 seconds, passing the values from variables
 setTimeout('set_alert("'+sir+'", '+nr2+')', 1500);
});
</script>

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag is used to add lists into <ul> and <ol> elements?
<dt> <dd> <li>
<ul>
 <li>http://coursesweb.net/html/</li>
 <li>http://coursesweb.net/css/</li>
</ul>
Which value of the "display" property creates a block box for the content and ads a bullet marker?
block list-item inline-block
.some_class {
  display: list-item;
}
Which instruction converts a JavaScript object into a JSON string.
JSON.parse() JSON.stringify eval()
var obj = {
 "courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}
Indicate the PHP class used to work with HTML and XML content in PHP.
stdClass PDO DOMDocument
$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net
setTimeout and setInterval in JavaScript

Last accessed pages

  1. array_map and array_search in JavaScript (1395)
  2. Working with HTML attributes in PHP (6701)
  3. XML data from ActionScript to a PHP script (1104)
  4. html2canvas - Save page screenshoot on server (1224)
  5. Laravel Middleware (136)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (1976)
  2. Contact page - CoursesWeb (1924)
  3. Tabs effect with CSS (1924)
  4. Insert, Select and Update NULL value in MySQL (1228)
  5. PHP getElementById and getElementsByTagName (723)