Javascript Course

Using callback functions

Callback Functions are functions that are passed as arguments to other function.

- Example (see the comments in code):
<p>When the following button is clicked, it is added its tag-name in #resp</p>
<button id='btn'>Click</button>
<blockquote id='resp'>#resp</blockquote>
<script>
// defines a callback function, receives an object with the event
function callback(ev){
 //adds in #resp the name of the html element that emitted the event
 document.getElementById('resp').innerHTML = ev.target.tagName;
}

// registers the click event on #btn to call the callback() function
document.getElementById('btn').addEventListener('click', callback);
</script>
• There are JavaScript functions that can be used only with callback function. For example: setTimeout() and setInterval().
Example, displays the number of seconds into a HTML element. Test yourself this example.
<ht>Example callback function with setInterval()</h4>
<blockquote id='resp'>#resp</blockquote>
<script>
var seconds = 0;
var resp = document.getElementById('resp');

// used as callback function in setInterval()
function addSeconds(x) {
 // increments the seconds and adds the value in #resp
 seconds++;
 resp.innerHTML = seconds;
}

// calls the addSeconds() to every second (1000 milliseconds)
setInterval('addSeconds()', 1000);
</script>
• Anonymous functions can also be used as callback functions.
- Here is an example with setTimeout() and an anonymous arrow function used as argument.
<ht>Example anonymous function with setTimeout()</h4>
<blockquote id='resp'>#resp</blockquote>
<script>
var resp = document.getElementById('resp');

//adds a text in #resp after 2 seconds
setTimeout(()=>{
 resp.innerHTML ='https://CoursesWeb.net/';
}, 2000);
</script>
The callback function can be very useful when we want to finish a long task, while allowing us to continue the execution of the JavaScript code.
- A good example is with an Ajax function that receives a callback function as argument. When the server response is completely received, it is passed to the callback function, but in the meen time the script continues to preccess the other instructions.
- If you want to test this example, you have to create a text file, named 'test.txt', with some text, in the same folder in which you have the page with this script.
<script>
// gets data from external file
// receives the URL address of the file, and a callback function that will be called when the response is received
function ajaxF(url, callback) {
 var request = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); // sets the XMLHttpRequest instance

 request.open('GET', url); // define the request
 request.send(null); // sends data

 // Check request status, when the response is completely received pass it to callback function
 request.onreadystatechange = function() {
 if (request.readyState == 4) {
 callback(request.responseText);
 }
 }
}

// the callback function
function addResp(resp) {
 alert(resp);
}

// calls the ajaxF() function, passing the file address, and the callback function
ajaxF('test.txt', addResp);

// continue the script while the Ajax and callback functions are executed
alert('Message 1');
</script>

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which type of <input> creates a date input control, such as a pop-up calendar?
type="text" type="date" type="button"
<input type="date" name="set_date" value="2012-10-15" />
Which CSS property adds shadow effects to the text of an element?
font-style color text-shadow
h2 {
  text-shadow: 2px 3px 3px #a0a1fe;
}
Click on the function that adds new elements to the end of an array.
pop() shift() push()
var pags = ["lessons", "courses"];
pags.push("download", "tutorials");
alert(pags[2]);            // download
Which function sorts an array by key, in ascending order, maintaining key to data correlations?
asort() ksort() sort()
$lang =[10=>"PHP", 20=>"JavaScript", "site"=>"coursesweb.net");
ksort($lang);
var_export($lang);     // array ("site"=>"coursesweb.net", 10=>"PHP", 20=>"JavaScript")
Callback Functions in JavaScript

Last accessed pages

  1. Get and Modify content of an Iframe (23904)
  2. JavaScript Scripts (1987)
  3. Ajax click Tracking - Monitor clicks on html elements (1217)
  4. CSS3 - text-shadow, word-wrap, text-overflow (1007)
  5. Multi-Level Menu Creator (2194)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (232)
  2. PHP-MySQL free course, online tutorials PHP MySQL code (157)
  3. Read Excel file data in PHP - PhpExcelReader (146)
  4. querySelector and querySelectorAll (102)
  5. Wake Up! (101)