Explanation of callback functions and asynchrony in JavaScript (code examples)

This article brings you an explanation (code example) about callback functions and asynchronous functions in JavaScript. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

The first thing to know is that callbacks and asynchronous are not the same thing
I used to think that every callback function in js is processed asynchronously. In fact, it is not. It can be a synchronous callback or an asynchronous callback.

callback example

Speaking of callback, everyone has encountered the following examples in javascript

$('#id').on('click', function(){
    //code
});
$('#id').setTimeout(function(){
    //code
},1000);

These codes have been used for so long, and I know how to use them, but they may not be useful for callbacks. The concept is not so clear

Another example

function a(callback) 
{
    alert("执行parent函数a！"); 
    alert("开始调用回调函数"); 
    callback(); 
    alert("结束回调函数"); 
}

function b(){ 
    alert("执行回调函数b"); 
} 

function test() 
{ 
   a(b);
   a(function() { 
        alert("执行匿名回调函数"); 
   }); 
}
test();

Execution sequence:
Execute parent function a!
Start calling the callback function
Execute the callback function b
End the callback function

Execute the parent function a!
Start calling the callback function
Execute the anonymous callback function
End the callback function

callback principle

Simply put, it is to pass a function as a formal parameter. The above The callback parameter can be changed to any name

callback is implemented in C

Callback without parameters

#include <iostream>
using namespace std; 

//定义回调函数
void Print() 
{
    cout <<"Hello World!\n";
}

//定义实现回调函数的"调用函数"
void Call(void (*callback)())
{
    callback();
}

//在main函数中实现函数回调
int main(int argc,char* argv[])
{
    Call(Print);
    return 0;
}

Callback with parameters

#include <iostream>
using namespace std; 

//定义带参回调函数
void Print(string s) 
{
   cout << s << endl;
}

//定义实现带参回调函数的"调用函数"
void Call(void (*callback)(string),string s)
{
    callback(s);
}

//在main函数中实现带参的函数回调
int main(int argc,char* argv[])
{
    Call(Print,"Hello World!");
    return 0;
}

Asynchronous example

Classic example

function a(){
    console.log('执行a');
    setTimeout(function(){
        console.log('setTimeout');
    }, 1000);
}

function b(){
    console.log('执行b');
}

a();
b();

Execution sequence:
Execute a
Execute b
setTimeout (execute after one second)

Asynchronous principle

We all know that js is single-threaded. The so-called single-threaded means that it can only complete one task at a time. The scheduling method of its tasks is queuing. There is no doubt that this kind of efficiency is not high. The subsequent tasks must wait for the previous tasks. It can only be executed after the execution is completed. If there is a time-consuming operation, such as ajax request, file io
Other languages ​​often open a thread to handle such time-consuming tasks, but js itself is single-threaded. , js's processing of this kind of task is to mount this task one by one, and then add the callback function to the end of the execution queue after the time-consuming task is completed
So, in the example just now, even if the delay time is set to 0, Same result

The above is the detailed content of Explanation of callback functions and asynchrony in JavaScript (code examples). For more information, please follow other related articles on the PHP Chinese website!