“This is the 20th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”

In computer programming, a Callback, or simply a Callback, is a reference to a piece of executable code that passes a function to other code as an argument. — Wikipedia


Problem of the sample

Suppose you now have a function that loads a script dynamically

Function loadScript(SRC) {// Create a <script> tag and attach it to the page // This will cause the script with the given SRC to start loading, Let script = document.createElement('script'); script.src = src; document.head.append(script); }Copy the code

Create a lodash.js file as an example

https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js
Copy the code

If you want to load lodash.js into the page, you can do so

/ / loads and executes in the context of the given path script loadScript (' https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js');Copy the code

The function _ is declared in lodash.js

If you are in loadScript(…) Get the function immediately after the call, and you will find that the function is undefined

This is because the script is called “asynchronously”, that is, if loadScript(…) Any other code below will not wait for the script to finish loading. So if you call _ in lodash.js, you’ll get an error because the function doesn’t exist yet.


The solution

To solve this problem, we can add a callback function as the second argument to loadScript, which should be executed when the script has finished loading.

Improvement:

function loadScript(src, callback) { let script = document.createElement('script'); script.src = src; script.onload = () => callback(script); // Key code document.head. Append (script); }Copy the code

Now, if you want to call a method in the script.js file, you can write the method in the callback function, because the callback function will be executed after the script has loaded.

LoadScript (' https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js', script => { console.log(`script ${script.src} is loaded`); Console. log(' function declared in script ', _); });Copy the code

Running results:

A function that is passed as an argument to another function in JavaScript and called inside that external function to accomplish something is called a callback function.

To improve the

We did not consider the error case above. For example, the script failed to load. So we need to improve and add loading error handling

Callback (null, script) is called if the load succeeds, and callback(error) is called if the load succeeds.


The new problem

When we only have one callback, it’s nothing, but when there are too many callbacks, the code gets messy like this, which is often referred to as callback hell.

So clearly we need better ways to solve this problem, and one of the better ways is promise, which we’ll talk about later.

References:

Callback (computer programming)

Introduction: callbacks

MDN Callback function

🎨 [thumbs up] [concerns] don’t get lost, more front-end dry goods waiting for you to unlock

Phase to recommend

👉 Take a look at JS prototype inheritance

Do you know how to use getters and setters in 👉 JS?

👉 In-depth understanding of ES6 arrow objects

👉 JS decorator pattern instance analysis