시작하기 전에 먼저 함수에 대한 이해가 탄탄한지 확인해야 합니다.
함수는 특정 작업을 수행하기 위한 코드 세트가 내부에 포함된 논리적 구성 요소입니다. 함수를 사용하면 실제로 디버깅과 유지 관리가 용이하도록 보다 체계적인 방식으로 코드를 작성할 수 있습니다. 함수를 사용하면 코드 재사용도 가능합니다.
동일한 코드를 반복해서 작성하는 대신 함수를 한 번만 정의하고 필요할 때 호출하면 됩니다.
이제 자바스크립트에서 함수를 선언하는 방법을 살펴보겠습니다.
이전에 선언된 함수는 다음 상황 중 하나에서 호출됩니다.
让我用人话解释一下，回调函数是一个函数，将会在另一个函数完成执行后立即执行。回调函数是一个作为参数传给另一个 JavaScript 函数的函数。这个回调函数会在传给的函数内部执行。
在 JavaScript 中函数被看作是一类对象。对于一类对象，我们的意思是指数字、函数或变量可以与语言中的其他实体相同。作为一类对象，可以将函数作为变量传给其他函数，也可以从其他函数中返回这些函数。
.
🎜JavaScript에서 함수는 일종의 객체로 간주됩니다. 객체 클래스란 숫자, 함수 또는 변수가 언어의 다른 엔터티와 동일할 수 있음을 의미합니다. 객체 클래스로서 함수는 다른 함수에 변수로 전달될 수 있으며 다른 함수에서 반환될 수 있습니다. 🎜🎜이런 종류의 작업을 수행할 수 있는 함수를 고차 함수라고 합니다. 콜백 함수는 실제로 패턴입니다. "패턴"이라는 단어는 소프트웨어 개발에서 일반적인 문제를 해결하기 위한 입증된 특정 접근 방식을 나타냅니다. 콜백 패턴으로 콜백 함수를 사용하는 것이 가장 좋습니다. 🎜🎜콜백이 필요한 이유🎜🎜
이벤트 루프🎜. 단일 스레드 이벤트 루프에서 장기 실행 작업을 수행하려고 하면 프로세스가 차단됩니다. 기술적으로 이것은 작업이 완료되기를 기다리는 동안 프로세스가 다른 이벤트 처리를 중지하기 때문에 좋지 않습니다. 🎜🎜예를 들어 alert 문은 브라우저의 자바스크립트 차단 코드 중 하나로 간주됩니다. 경고를 실행하면 경고 대화 상자 창을 닫을 때까지 브라우저에서 상호 작용할 수 없습니다. 장기 실행 작업 차단을 방지하기 위해 콜백을 사용합니다. 🎜🎜어떤 경우에 콜백이 사용되는지 정확히 알 수 있도록 좀 더 자세히 살펴보겠습니다. 🎜🎜🎜🎜위 코드 조각에서는 getMessage() 함수가 먼저 실행된 후 displayMessage()가 실행됩니다. 둘 다 브라우저의 콘솔 창에 메시지를 표시하고 둘 다 즉시 실행됩니다. getMessage()函数，然后执行 displayMessage() 。两者都在浏览器的控制台窗口中显示了一条消息，并且都立即执行。
在某些情况下，一些代码不会立即执行。例如，如果我们假设 getMessage() 函数执行 API 调用，则必须将请求发送到服务器并等待响应。这时我们应该如何处理呢？
如何使用回调函数
我认为与其告诉你 JavaScript 回调函数的语法，不如在前面的例子中实现回调函数更好。修改后的代码段显示在下面的截图中。
为了使用回调函数，我们需要执行某种无法立即显示结果的任务。为了模拟这种行为，我们用 JavaScript 的 setTimeout() 函数。该函数会暂停两秒钟，然后在控制台窗口中显示消息“ Hi，there”。
“显示的消息”将被显示在浏览器的控制台窗口中。在这种情况下，首先，我们需要等待 getMessage() 函数。成功执行此函数后，再执行 displayMessage() 函数。
回调的工作方式
让我解释一下前面的例子在幕后发生的事。
从上一个例子可以看到，在 getMessage() 函数中，我们传递了两个参数。第一个参数是 msg 变量，该变量显示在浏览器的控制台窗口中，第二个参数是回调函数。
现在，你可能想知道为什么将回调函数作为参数进行传递 —— 要实现回调函数，我们必须将一个函数作为参数传给另一个函数。
在 getMessage() 完成任务后，我们将调用回调函数。之后，当调用 getMessage() 函数时，将引用传给displayMessage() 函数，该函数就是回调函数。
注意，当调用 getMessage() 函数时，我们仅将其引用传给 displayMessage() 函数。这就是为什么你不会在它旁边看到函数调用运算符，也就是() 符号。
Javascript 回调是异步的吗？
JavaScript 被认为是单线程脚本语言。单线程是指 JavaScript 一次执行一个代码块。当 JavaScript 忙于执行一个块时，它不可能移到下一个块。
换句话说，我们可以认为 JavaScript 代码本质上总是阻塞的。但是这种阻塞性使我们无法在某些情况下编写代码，因为在这些情况下我们没有办法在执行某些特定任务后立即得到结果。
我谈论的任务包括以下情况：
- 通过对某些端点进行 API 调用来获取数据。
- 通过发送网络请求从远程服务器获取一些资源（例如，文本文件、图像文件、二进制文件等）。
为了处理这些情况，必须编写异步代码，而回调函数是处理这些情况的一种方法。所以从本质上上说，回调函数是异步的。
Javascript 回调地狱
当多个异步函数一个接一个地执行时，会产生回调地狱。它也被称为厄运金字塔。
假设你要获取所有 Github 用户的列表。然后在用户中搜索 JavaScript 库的主要贡献者。再然后，你想要在用户中获取姓名为 John 的人员的详细信息。
为了在回调的帮助下实现这个功能，代码应该如下所示：
http.get('https://api.github.com/users', function(users) {
/* Display all users */
console.log(users);
http.get('https://api.github.com/repos/javascript/contributors?q=contributions&order=desc',
function(contributors) {
/* Display all top contributors */
console.log(contributors);
http.get('https://api.github.com/users/Jhon', function(userData) {
/* Display user with username 'Jhon' */
console.log(userData);
});
});
});로그인 후 복사
从上面的代码片段中，你可以看到代码变得更加难以理解，以及难以维护和修改。这是由回调函数的嵌套而引发的。
如何避免回调地狱？
可以使用多种技术来避免回调地狱，如下所示。
- 使用promise
- 借助 async-await
- 使用 async.js 库
使用 Async.js 库
让我们谈谈怎样用 async.js 库避免回调地狱。
根据 async.js 官方网站的描述：Async 是一个工具模块，它提供了直接、强大的函数来使用异步 JavaScript。
Async.js 总共提供约 70 个函数。现在，我们将仅讨论其中两个，即 async.waterfall() 和 async.series()
어떤 경우에는 일부 코드가 즉시 실행되지 않을 수도 있습니다. 예를 들어 getMessage() 함수가 API 호출을 수행한다고 가정하면 서버에 요청을 보내고 응답을 기다려야 합니다. 우리는 이 문제를 어떻게 처리해야 합니까? 콜백함수 사용법
자바스크립트 콜백함수의 구문을 알려주기보다는 앞선 예에서 콜백함수를 구현해 보는 것이 좋을 것 같습니다. 수정된 코드 조각은 아래 스크린샷에 표시되어 있습니다.
🎜🎜For 콜백 함수를 사용하면 결과를 즉시 표시할 수 없는 일종의 작업을 수행해야 합니다. 이 동작을 시뮬레이션하기 위해 JavaScript의 setTimeout() 함수를 사용합니다. 함수는 2초 동안 일시 중지된 후 콘솔 창에 "Hi, there"라는 메시지를 표시합니다. 🎜🎜"표시된 메시지"가 브라우저의 콘솔 창에 표시됩니다. 이 경우 먼저 getMessage() 함수를 기다려야 합니다. 이 함수를 성공적으로 실행한 후 displayMessage() 함수를 실행하세요. 🎜콜백 작동 방식
🎜이전 예에서 뒤에서 무슨 일이 일어나고 있는지 설명하겠습니다. 🎜🎜이전 예에서 볼 수 있듯이 getMessage() 함수에서는 두 개의 매개변수를 전달합니다. 첫 번째 매개변수는 브라우저 콘솔 창에 표시되는 msg 변수이고, 두 번째 매개변수는 콜백 함수입니다. 🎜🎜이제 콜백 함수가 매개변수로 전달되는 이유가 궁금할 것입니다. 콜백 함수를 구현하려면 함수를 다른 함수에 매개변수로 전달해야 합니다. 🎜🎜getMessage()가 작업을 완료한 후 콜백 함수를 호출합니다. 나중에 getMessage() 함수가 호출되면 콜백 함수인 displayMessage() 함수에 참조가 전달됩니다. 🎜🎜 getMessage() 함수를 호출할 때 displayMessage() 함수에 대한 참조만 전달한다는 점에 유의하세요. 이것이 바로 옆에 함수 호출 연산자인 () 기호가 표시되지 않는 이유입니다. 🎜Javascript 콜백은 비동기식입니까?
🎜JavaScript는 단일 스레드 스크립팅 언어로 간주됩니다. 단일 스레딩은 JavaScript가 한 번에 한 블록의 코드를 실행한다는 것을 의미합니다. JavaScript는 한 블록을 실행하는 동안 다음 블록으로 이동할 수 없습니다. 🎜🎜즉, JavaScript 코드는 본질적으로 항상 차단되는 코드라고 생각할 수 있습니다. 그러나 이러한 차단 특성으로 인해 일부 특정 작업을 수행한 후 즉시 결과를 얻을 수 없는 경우에 코드를 작성할 수 없습니다. 🎜🎜제가 말하는 작업에는 다음과 같은 상황이 포함됩니다. 🎜
- 일부 엔드포인트에 대한 API 호출을 통해 데이터를 가져옵니다.
- 네트워크 요청을 보내 원격 서버에서 일부 리소스(예: 텍스트 파일, 이미지 파일, 바이너리 파일 등)를 가져옵니다.
🎜이러한 상황을 처리하려면 비동기 코드를 작성해야 하며 콜백 함수는 이러한 상황을 처리하는 한 가지 방법입니다. 따라서 본질적으로 콜백 함수는 비동기식입니다. 🎜자바스크립트 콜백 지옥
🎜콜백 지옥은 여러 비동기 함수가 차례로 실행될 때 발생합니다. 파멸의 피라미드라고도 알려져 있습니다. 🎜🎜모든 Github 사용자 목록을 얻고 싶다고 가정해 보세요. 그런 다음 사용자 중에서 JavaScript 라이브러리에 가장 큰 기여를 한 사람을 검색하세요. 그런 다음 사용자 중 John이라는 사람의 세부 정보를 가져오려고 합니다. 🎜🎜콜백을 사용하여 이 기능을 구현하려면 코드는 다음과 같아야 합니다. 🎜var async = require('async');
async.waterfall([
function(callback) {
/*
Here, the first argument value is null, it indicates that
the next function will be executed from the array of functions.
If the value was true or any string then final callback function
will be executed, other remaining functions in the array
will not be executed.
*/
callback(null, 'one', 'two');
},
function(param1, param2, callback) {
// param1 now equals 'one' and param2 now equals 'two'
callback(null, 'three');
},
function(param1, callback) {
// param1 now equals 'three'
callback(null, 'done');
}
], function (err, result) {
/*
This is the final callback function.
result now equals 'done'
*/
});로그인 후 복사
로그인 후 복사
콜백 지옥을 피하려면?
🎜콜백 지옥을 피하기 위해 아래와 같이 다양한 기술을 사용할 수 있습니다. 🎜
- Promise 사용
- async-await 사용
- async.js 라이브러리 사용
Async.js 라이브러리 사용 li> h3>🎜async.js 라이브러리를 사용하여 콜백 지옥을 피하는 방법에 대해 이야기해 보겠습니다. 🎜🎜async.js 공식 웹사이트 설명에 따르면: Async는 비동기 JavaScript를 사용할 수 있도록 직접적이고 강력한 기능을 제공하는 도구 모듈입니다. 🎜🎜Async.js는 총 70여개의 기능을 제공합니다. 지금은 그 중 async.waterfall()과 async.series() 두 가지만 논의하겠습니다. 🎜🎜async.waterfall()🎜🎜이 함수는 특정 작업을 차례로 실행한 후 이전 작업의 결과를 다음 작업으로 전달하려는 경우 매우 유용합니다. 이는 함수의 "작업" 배열과 "작업" 배열의 모든 함수가 완료된 후 또는 오류 개체와 함께 "콜백"이 호출된 후에 호출되는 최종 "콜백" 함수를 사용합니다. 🎜var async = require('async');
async.waterfall([
function(callback) {
/*
Here, the first argument value is null, it indicates that
the next function will be executed from the array of functions.
If the value was true or any string then final callback function
will be executed, other remaining functions in the array
will not be executed.
*/
callback(null, 'one', 'two');
},
function(param1, param2, callback) {
// param1 now equals 'one' and param2 now equals 'two'
callback(null, 'three');
},
function(param1, callback) {
// param1 now equals 'three'
callback(null, 'done');
}
], function (err, result) {
/*
This is the final callback function.
result now equals 'done'
*/
});로그인 후 복사
로그인 후 복사
async.series()
当你要运行一个函数然后在所有函数成功执行后需要获取结果时，它很有用。 async.waterfall() 和 async.series() 之间的主要区别在于， async.series() 不会将数据从一个函数传递到另一个函数。
async.series([
function(callback) {
// do some stuff ...
callback(null, 'one');
},
function(callback) {
// do some more stuff ...
callback(null, 'two');
}
],
// optional callback
function(err, results) {
// results is now equal to ['one', 'two']
});로그인 후 복사
Javascript 回调与闭包
闭包
用技术术语来说，闭包是捆绑在一起的函数的组合，引用了其周围的状态。
简而言之，闭包允许从内部函数访问外部函数的作用域。
要使用闭包，我们需要在一个函数内部定义另一个函数。然后，我们需要将其返回或传给另一个函数。
回调
从概念上讲，回调类似于闭包。回调基本上是把一个函数作为另一个函数的用法。
最后的话
希望本文能消除你对 javascript 回调函数的所有疑问。如果你觉得这篇文章有帮助，请与他人分享。
原文地址：https://dzone.com/articles/javascript-callback-functions-in-depth-guide-for-2
为了保证的可读性，本文采用意译而非直译。
更多编程相关知识，请访问：编程教学！！
위 내용은 JavaScript의 콜백 함수에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
인간의 관점에서 설명하자면, 콜백 함수는 다른 함수의 실행이 완료되자마자 실행되는 함수입니다. 콜백 함수는 다른 JavaScript 함수에 매개변수로 전달되는 함수입니다. 이 콜백 함수는 전달된 함수 내에서 실행됩니다. 
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
