Asynchronous JavaScript

❮ Previous Next ❯

"I'll complete it later!"

Functions that run parallel with other functions are referred to as asynchronous

A clear instance is the use of JavaScript setTimeout().

Asynchronous JavaScript

The instances mentioned in the last section were quite straightforward.

The examples were meant to show how callback functions are written in code.

In the given example, the function is named myDisplayer.

It gets sent to the function myCalculator() as input.

In everyday situations, callbacks are commonly paired with asynchronous functions.

An example of this is the JavaScript function called setTimeout().

Waiting for a Timeout

When you use the JavaScript function setTimeout(), you can define a callback function to run when the timeout occurs:

In the example provided, the function called myFunction is utilized as a callback.

The function called myFunction is given as an argument to the setTimeout()function.

The function myFunction() will be triggered after 3 seconds because the time-out is set to 3000 milliseconds.

Note

When you provide a function as an argument, avoid using parentheses.

Correct: Set a timer to execute "myFunction" after a delay of 3000 milliseconds.

Incorrect: ~~setTimeout(myFunction(), 3000)~~;

Instead of giving the name of a function as input to another function, you can simply provide the entire function itself.

In the example below, the code function(){ myFunction("I love You !!!"); } serves as a callback. This code represents a whole function, and it is given as an argument to the setTimeout() function.

The timeout duration is 3000 milliseconds, meaning that the function myFunction() will be executed after 3 seconds.

Waiting for Intervals:

When you employ the JavaScript function setInterval(), you have the option to define a callback function that will run at regular intervals:

In the given example, the function called myFunction is used as a callback.

The function called myFunction is given as an argument to the setInterval()function.

The interval between calls to myFunction() is 1000 milliseconds, meaning it will be executed every second.

Callback Alternatives

Using asynchronous programming in JavaScript allows programs to begin tasks that take a long time to complete and simultaneously carry out other tasks in parallel.

However, writing and debugging asynchronous programs can be challenging.

Due to this, many contemporary JavaScript techniques for handling asynchronous tasks avoid using callbacks. Instead, in JavaScript, the solution to asynchronous programming lies in utilizing Promises.

Note

In the upcoming tutorial chapter, you'll discover more about promises.

<!DOCTYPE html>
<html>
  <body>
    <h1>JavaScript Functions</h1>
    <h2>Callback Functions</h2>
    <p>The result of the calculation is:</p>
    <p id="demo"></p>
    <script>
      function myDisplayer(something) {
        document.getElementById("demo").innerHTML = something;
      }

      function myCalculator(num1, num2, myCallback) {
        let sum = num1 + num2;
        myCallback(sum);
      }
      myCalculator(5, 5, myDisplayer);
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h1>JavaScript Functions</h1>
    <h2>setTimeout() with a Callback</h2>
    <p>Wait 3 seconds (3000 milliseconds) for this page to change.</p>
    <h1 id="demo"></h1>
    <script>
      setTimeout(myFunction, 3000);

      function myFunction() {
        document.getElementById("demo").innerHTML = "I love You !!";
      }
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h1>JavaScript Functions</h1>
    <h2>setInterval() with a Callback</h2>
    <p>Wait 3 seconds (3000 milliseconds) for this page to change.</p>
    <h1 id="demo"></h1>
    <script>
      setTimeout(function() {
        myFunction("I love You !!!");
      }, 3000);

      function myFunction(value) {
        document.getElementById("demo").innerHTML = value;
      }
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h1>JavaScript Functions</h1>
    <h2>setInterval() with a Callback</h2>
    <p>Using setInterval() to display the time every second (1000 milliseconds).</p>
    <h1 id="demo"></h1>
    <script>
      setInterval(myFunction, 1000);

      function myFunction() {
        let d = new Date();
        document.getElementById("demo").innerHTML = d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds();
      }
    </script>
  </body>
</html>

❮ Previous Next ❯

JavaScript Tutorial

JS Math

JS Versions

JS Objects

JS Functions

JS Classes

JS Async

JS HTML DOM

JS Browser BOM

JS Web APIs

JS AJAX

JS JSON

JS vs jQuery

JS Graphics

Asynchronous JavaScript

Asynchronous JavaScript

Waiting for a Timeout

Note

Waiting for Intervals:

Callback Alternatives

Note

Web Development