revision:
Callbacks are the oldest way to handle asynchronous operations in JavaScript. This technique allows a function to call another function. A callback function can run after another function has finished
code example:
function fetchData(callback) {
setTimeout(() => {
const data = "Some data";
callback(data);
}, 1000);
}
fetchData((data) => {
console.log(data); // "Some data" after 1 second
});
Drawbacks: 1/ callback hell (nested callbacks make code hard to read and maintain); 2/ error handling can become cumbersome.
JavaScript functions are executed in the sequence they are called, not in the sequence they are defined.
examples
<div class="spec">
<a id="demo"></a><br>
</div>
<script>
function myDisplayer(some) {
document.getElementById("demo").innerHTML += some + ", ";
}
function myFirst() {
myDisplayer("Hello");
}
function mySecond() {
myDisplayer("Goodbye");
}
mySecond();
myFirst();
</script>
1/ You could call a function, save the result, and then call another function to display the result.
problem : you have to call two functions to display the result.
2/ You could call a function and let this function call the other function to display the result.
problem : you cannot prevent the first function from displaying the result.
3/ the callback function : a callback is a function passed as an argument to another function. Using a callback, you could call the function with a callback, and let the function run the callback after the result is obtained.
examples
do a calculation and then display the result
NOTE: when you pass a function as an argument, remember not to use parenthesis :
correct/right : myCalculator(5, 5, myDisplayer);
wrong : myCalculator(5, 5, myDisplayer());
Where callbacks really shine are in asynchronous functions, i.e. where one function has to wait for another function (like waiting for a file to load).
waiting for a timeout: when using the JavaScript function setTimeout(), you specify a callback function to be executed on time-out.
examples
wait 3 seconds (3000 milliseconds) for this page to change.
<div class="spec">
<p>refresh page!!</p>
<a id="demo3"></a>
</div>
<script>
function setT() {
document.getElementById("demo3").innerHTML = "How do you do?!!";
}
setTimeout(setT, 3000);
</script>
explanation: setT is used as a callback. The function (the function name) is passed to setTimeout() as an argument. 3000 is the number of milliseconds before time-out, so setT() will be called after 3 seconds.
Instead of passing the name of a function as an argument to another function, you can always pass a whole function instead.
examples
wait 4 seconds (4000 milliseconds) for this page to change.
explanation: function(){ myFun("Good to hear from you !!!"); } is used as a callback. It is a complete function, which is passed to setTimeout() as an argument. 4000 is the number of milliseconds before time-out, so myFun() will be called after 4 seconds.
examples
using setInterval() to display the time every second (1000 milliseconds).
if you create a function to load an external resource (like a script or a file), you cannot use the content before it is fully loaded. This is the perfect time to use a callback.
a JavaScript Promise object contains both the producing code and calls to the consuming code. "Producing code" is code that can take some time. "Consuming code" is code that must wait for the result. A promise is a JavaScript object that links producing code and consuming code.
Syntax:
let myPromise = new Promise(function(myResolve, myReject) {
// "Producing Code" (May take some time)
myResolve(); // when successful
myReject(); // when error
});
// "Consuming Code" (Must wait for a fulfilled Promise)
myPromise.then(
function(value) { /* code if successful */ },
function(error) { /* code if some error */ }
);
a JavaScript Promise object can be: pending, fulfilled, rejected. The Promise object supports two properties: state and result. While a Promise object is "pending" (working), the result is undefined. When a Promise object is "fulfilled", the result is a value. When a Promise object is "rejected", the result is an error object.
You cannot access the Promise properties state and result. You must use a Promise method to handle promises. Here is how to use a Promise:
myPromise.then(
function(value) { /* code if successful */ },
function(error) { /* code if some error */ }
);
Promise.then() takes two arguments, a callback for success and another for failure.Both are optional, so you can add a callback for success or failure only.
examples
JavaScript Promise
<div class="spec">
<a id="demo6"></a>
</div>
<script>
function myDisplayer(some) {
document.getElementById("demo6").innerHTML = some;
}
let myPromise = new Promise(function(myResolve, myReject) {
let x = 0;
// some code (try to change x to 5)
if (x == 0) {
myResolve("OK");
} else {
myReject("Error");
}
});
myPromise.then(
function(value) {myDisplayer(value);},
function(error) {myDisplayer(error);}
);
</script>
JavaScript Promise - waiting for a Timeout.
wait 3 seconds (3000 milliseconds) for this page to change.
<div class="spec">
<p>refreshh page!!</p>
<a id="demo7"></a>
</div>
<script>
let myPromise1 = new Promise(function(myResolve, myReject) {
setTimeout(function(){ myResolve("Iit ends up quite wellc!!"); }, 3000);
});
myPromise1.then(function(value) {
document.getElementById("demo7").innerHTML = value;
});
</script>
"await" makes a function wait for a Promise. The keyword "async" before a function makes the function return a promise
examples
JavaScript async. Look at the syntax carefully
<div class="spec">
<a style="margin-left: 3vw;" id="demo8"></a>
</div>
<script>
function myDisplayer(some) {
document.getElementById("demo8").innerHTML = some;
}
async function myFunction() {return "Hello";}
myFunction().then(
function(value) {myDisplayer(value);},
function(error) {myDisplayer(error);}
);
</script>
The keyword "await" before a function makes the function wait for a promise: let value = await promise;.
The await keyword can only be used inside an async function.
examples
basic syntax
<div class="spec">
<a id="demo9"></a>
</div>
<script>
async function myDisplay() {
let myPromise2 = new Promise(function(myResolve, myReject) {
myResolve("I love You !!");
});
document.getElementById("demo9").innerHTML = await myPromise;
}
myDisplay();
</script>
waiting for a Timeout
async: the "async" keyword defines an asynchronous function.
await: the "async" function contains "await" that pauses the execution of "async" function. "await" is only valid inside the "async" function.
promise: a promise is a proxy value. It tells us about the success/failure of the asynchronous event. A Promise must contain resolve() or reject() call or else the consumer of the Promise will never know whether Promise is fulfilled or not. If that happened then the program will keep waiting for await and that code block will never be executed further.
syntax examples
async function name(param0) {
statements
}
async function name(param0, param1) {
statements
}
async function name(param0, param1, /* …, */ paramN) {
statements
}
code examples
<script>
function resolveAfter2Seconds() {
return new Promise((resolve) => {
setTimeout(() => {
resolve("resolved");
}, 2000);
});
}
async function asyncCall() {
console.log("calling");
const result = await resolveAfter2Seconds();
console.log(result);
// Expected output: "resolved"
}
asyncCall();
</script>
<script>function resolveAfter2Seconds() {
console.log("starting slow promise");
return new Promise((resolve) => {
setTimeout(() => {
resolve("slow");
console.log("slow promise is done");
}, 2000);
});
}
function resolveAfter1Second() {
console.log("starting fast promise");
return new Promise((resolve) => {
setTimeout(() => {
resolve("fast");
console.log("fast promise is done");
}, 1000);
});
}
</script>
<script>
async function sequentialStart() {
console.log("== sequentialStart starts ==");
// 1. Start a timer, log after it's done
const slow = resolveAfter2Seconds();
console.log(await slow);
// 2. Start the next timer after waiting for the previous one
const fast = resolveAfter1Second();
console.log(await fast);
console.log("== sequentialStart done ==");
}
async function sequentialWait() {
console.log("== sequentialWait starts ==");
// 1. Start two timers without waiting for each other
const slow = resolveAfter2Seconds();
const fast = resolveAfter1Second();
// 2. Wait for the slow timer to complete, and then log the result
console.log(await slow);
// 3. Wait for the fast timer to complete, and then log the result
console.log(await fast);
console.log("== sequentialWait done ==");
}
</script>
asynchronous function
code:
<div class="example">
<div id="message" class="spec"></div>
</div>
<script>
var msg = document.getElementById("message");
function f1() {
return new Promise(function (resolve, reject) {
setTimeout(function () {
msg.innerHTML += "<span>f1 is starting</span><br>";
msg.innerHTML += "<span>f1 is ending</span><br>";
resolve();
}, 1000);
})
}
async function f2() {
msg.innerHTML += "<span>f2 is starting</span><br>";
// Engine waits for f1() to finish it's execution before executing the next line
await f1();
msg.innerHTML += "<span>f2 is ending</span><br>";
}
f2();
</script>
<div>
<p class="spec" id="async01"></p>
<p class="spec" id="async01A"></p>
<p class="spec" id="async01B"></p>
<p class="spec" id="async01C"></p>
</div>
<script>
// (A) asynchronous add
async function add (first, second) {
return first + second;
}
// (B) run!
var result = add(2, 3);
document.getElementById("async01").innerHTML = result; // promise
// (C) here is how to work with promises
result
// (C1) resolve result
.then(res => {
document.getElementById("async01A").innerHTML = res; // 5
})
// (C2) optional - catch error
.catch(err => {
document.getElementById("async0B").innerHTML =err;
})
// (C3) optional - finally
.finally(() => {
document.getElementById("async01C").innerHTML = "Finally";
});
</script>
examples: async runs in parallel
<script>
//async runs in parallel
async function add (first, second) {
return first + second;
}
async function multiply (first, second) {
return first * second;
}
add(2, 3).then(result => {document.getElementById("async02").innerHTML = result;});
multiply(5, 5).then(result => { document.getElementById("async02A").innerHTML = result; });
// async chain
async function add_1 (first, second) {
return first + second;
}
async function multiply_1 (first, second) {
return first * second;
}
// (B) run!
// (B1) empty holder
var result1 = null;
// (B2) async chain
add_1(2, 3).then(res => {
multiply_1(res, 5).then(res => {
result1 = res;
document.getElementById("async02B").innerHTML = result1;
});
});
</script>
examples: await; waits for the result from an asynchronous function, but "await" can only be used inside another async function.
wait 3 seconds (3000 milliseconds) for this page to change.
<script>
async function myDisplay() {
let myPromise = new Promise(function(myResolve, myReject) {
setTimeout(function() {
myResolve("It's worth it !!"); }, 3000);
});
document.getElementById("async02").innerHTML = await myPromise;
}
myDisplay();
async function add (first, second) {
return first + second;
}
async function multiply (first, second) {
return first * second;
}
async function calc () {
var result = await add(2, 3);
document.getElementById("async03A").innerHTML = result; // 5
result = await multiply(result, 5);
document.getElementById("async03B").innerHTML =result; // 25
}
calc();
</script>