newbie approach: what is a javascript callback function?

by

In general, a callback function is used once another function you have called finishes (just like you stated in your question). A good example of this is AJAX requests: most libraries have a function that allows you to send a request to the server in the background without refreshing the page (this uses AJAX). You generally provide two callback functions to this AJAX function: a success function, and a failure function.

If this request succeeds, it calls the success function so that your code can do what it needs; for instance, it might refresh part of the page, do some sort of animation, or alert the user that their information was saved. On the other hand, if it failed, the callback function would probably alert the user that their data was not saved and that they should try again.

Callback functions allow library developers to create very generic code that others can use and then customize to their needs.

Below is some jQuery code to show you the example above (this code won’t work as the URL doesn’t exist):

jQuery.ajax(
  url: '/mywebsite/somepage.php',

  success: function itWorked(returnedData) {
    // This is the success function and will be called only if the ajax call
    // completes succesfully

    alert('Yay it worked! ' + returnedData);
  },

  error: function itFailed(originalRequest, textStatus, errorThrown) {
    // This is the error function and will only be called if the ajax call
    // has an error

    alert('It failed! ' + textStatus + '. ' + errorThrown);
  } 
);

EDIT: At the beginning, I said, “In general…”. In reality, callbacks are used for much more than just when a function finishes. Like stated in other answers, it can be used anywhere inside of a function: beginning, middle, end. The basic idea is that the developer of the code may not know how YOU are going to use HIS code. So, he makes it very generic and gives you the ability to do whatever you need with the data.

A good example of this is the jQuery.each method which allows you to pass in a callback that will be executed on each of the elements in the “array” (I say array because it can actually iterate over many things which may or may not be actual arrays).

<a href="https://stackoverflow.com/questions/3523628/someurl.html" class="special_link">Some URL</a>
<a href="anotherurl.html" class="special_link">Another URL</a>
<a href="onelasturl.html" class="special_link">One Last URL</a>

// The following code says: execute the myEachCallbackFunction on every link
// that has a class of 'special_link'
$('a.special_link').each(function myEachCallbackFunction(i) {

  // The link variable will contain the object that is currently
  // being iterated over. So, the first time through, it will hold
  // the "https://stackoverflow.com/questions/3523628/someurl.html" link, the second time it will hold the
  // 'anotherurl.html' link, and the last time it will hold the
  // 'onelasturl.html' link
  var link = $(this);

  // Change the background color of each link to be red
  link.css('background-color', 'red');
});

So, we can see from this example that the developers of jQuery implemented the .each method and allow us to do whatever we want to to each link that it is called upon.

More Related Contents:

  1. How do I convert an existing callback API to promises?
  2. How to create a JavaScript callback for knowing when an image is loaded?
  3. Callback after all asynchronous forEach callbacks are completed
  4. Getting a better understanding of callback functions in JavaScript
  5. How to make a function wait until a callback has been called using node.js
  6. CSS transition doesn’t start/callback isn’t called
  7. Create a custom callback in JavaScript
  8. How to “await” for a callback to return?
  9. nodeJs callbacks simple example
  10. jQuery pass more parameters into callback
  11. JavaScript Callback Scope [duplicate]
  12. What are Closures and Callbacks?
  13. When using callbacks inside a loop in javascript, is there any way to save a variable that’s updated in the loop for use in the callback? [duplicate]
  14. Variables set during $.getJSON function only accessible within function
  15. When should I use return false in jquery function?
  16. Callback function example
  17. Set a callback function to a new window in javascript
  18. How to have a javascript callback executed after an update panel postback?
  19. Why “$().ready(handler)” is not recommended?
  20. passing index from for loop to ajax callback function (JavaScript)
  21. Javascript callback function with parameters [duplicate]
  22. How can I preserve lexical scope in TypeScript with a callback function
  23. Waiting on multiple asynchronous calls to complete before continuing
  24. Converting a recursive function into an asynchronous CPS implementation (javascript)
  25. Can you wait for javascript callback?
  26. Asynchronous Script Loading Callback
  27. Does an async function always need to be called with await?
  28. JavaScript style for optional callbacks
  29. Load javascript async, then check DOM loaded before executing callback
  30. JavaScript Callback after calling function

Leave a Comment