JavaScript의 콜백 함수 및 비동기성에 대한 설명(코드 예)

이 글은 JavaScript의 콜백 함수와 비동기 함수에 대한 설명(코드 예제)을 제공합니다. 참고할 만한 가치가 있으니 도움이 필요한 분들에게 도움이 되길 바랍니다.

먼저 알아야 할 것은 콜백과 비동기는 같은 것이 아니라는 것입니다.
저는 js의 모든 콜백 함수가 비동기적으로 처리된다고 생각했습니다. 실제로는 비동기 콜백이 될 수 있습니다

.

콜백 예시

콜백 얘기가 나와서 말인데, 다들 자바스크립트에서 다음 예시를 접해 보셨을 겁니다

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

이 코드들은 너무 오랫동안 사용되어 사용법을 알고 있지만 콜백의 개념이 그리 명확하지 않을 수도 있습니다

또 예

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

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

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

실행 순서:
상위 함수 a를 실행하세요!
콜백 함수 호출 시작
콜백 함수 실행 b
콜백 함수 종료

부모 함수 a를 실행!
콜백 함수 호출 시작
익명 콜백 함수 실행
콜백 함수 종료

콜백 원리

간단히 말하면 함수를 정식 매개변수로 전달하는 것입니다. 위의 콜백 매개변수는 어떤 이름으로도 변경 가능합니다

. 콜백은 C++로 구현됩니다.

매개변수가 없는 콜백

#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;
}

매개변수가 있는 콜백

#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;
}

비동기 예시

전형적인 예시

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

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

a();
b();

실행 순서:

Execute a
Execute b
setTimeout(1초 후 실행)

Everyone 알고 있다 비동기 원칙

js는 단일 스레드입니다. 소위 단일 스레드는 한 번에 하나의 작업만 완료할 수 있음을 의미합니다. 작업 예약 방법은 이것이 효율적이지 않다는 것에는 의심의 여지가 없습니다. 후속 작업은 이전 작업이 완료될 때까지 기다려야 합니다. ajax 요청, 파일 io와 같이 시간이 많이 걸리는 작업이 있으면 다른 언어에서는 이러한 시간이 많이 걸리는 작업을 처리하기 위해 스레드를 여는 경우가 많지만 js 자체는 그렇습니다. 단일 스레드이며 js는 이러한 작업에 적합하지 않습니다. 처리는 이 작업을 하나씩 마운트한 다음 시간이 많이 걸리는 작업이 완료된 후 실행 대기열 끝에 콜백 함수를 추가하는 것입니다. 지금 예시에서는 지연 시간을 0으로 설정해도 결과는 같습니다

위 내용은 JavaScript의 콜백 함수 및 비동기성에 대한 설명(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!