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

- Example (see the comments in code):
<script type="text/javascript">
// defines a callback function
function callback(x) {
  return 2*x;
}

// defines a function that will use the callback() as argument
// param will represent the result returned by callback function passed as argument
function test(param) {
  alert(param);
}

// calls the test() function with callback() as argument
test( callback(8) );      // outputs 16
</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.
<div id="show_s"></div>
<script type="text/javascript">
var seconds = 0;
// used as callback function in setInterval()
function addSeconds(x) {
  // increments the seconds and adds the value in html tag with id="show_s"
  seconds++;
  document.getElementById('show_s').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 exaple with setTimeout() and an anonymous function used as argument.
<script type="text/javascript">
// displays an alert window after 2 seconds
setTimeout(function(){
  alert('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 type="text/javascript">
// 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 HTML5 tag defines marked text? (can be used to highlight parts of text)
<mark> <embed> <span>
<p>Free corses: <mark>coursesweb.net</mark> for Web Development.</p>
Which CSS pseudo-class adds a style to an element when the mouse is over it?
:focus :hover :active
a:hover {
  font-weight: bold;
  color: #00da01;
}
Click on the function which returns a string value that represents the number rounded to the x digits after the decimal point.
toPrecision(x) toFixed(x) floor(x)
var num = 12.34567;
num = num.toFixed(2);
alert(num);       // 12.35
Indicate the PHP function which reads an entire file into an array.
[) file() readfile()
$arr = file("a_file.txt", FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
var_export($arr);
Callback Functions in JavaScript

Last accessed pages

  1. PHP PDO - exec (INSERT, UPDATE, DELETE) MySQL (41724)
  2. Get Duration of Audio /Video file before Upload (5913)
  3. Follow the mouse cursor with a DIV inside a Parent (2703)
  4. Register and show online users and visitors (23278)
  5. Node.js Move and Copy Directory (1127)

Popular pages this month

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