JavaScript 回调

现代前端开发中，回调函数是一种非常重要的概念。它们允许我们在特定的时刻执行代码，常用于处理异步操作，例如事件监听、网络请求等。在本文中，我将通过几个例子来深入探讨回调函数的使用。

什么是回调函数？

回调函数（Callback）是一个作为参数传递给另一个函数的函数，这个回调函数将在外部函数的内部被执行。在JavaScript中，由于其事件驱动和异步的特性，回调函数应用非常广泛。

示例1：事件监听回调

下面是一个简单的HTML按钮点击事件的例子，我们将为按钮元素添加一个点击事件监听器，并传递一个回调函数来处理点击事件。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>回调函数示例：事件监听</title>
</head>
<body>
    <button id="clickMeBtn">点击我</button>

    <script>
        document.getElementById('clickMeBtn').addEventListener('click', function() {
            alert('按钮被点击了！');
        });
    </script>
</body>
</html>

在这个例子中，我们定义了一个匿名函数作为addEventListener方法的第二个参数。当用户点击按钮时，这个匿名函数就会被调用。

示例2：异步操作回调

异步操作，如网络请求，是回调函数的另一个常见用例。以下是使用XMLHttpRequest对象发起网络请求的示例。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>回调函数示例：异步操作</title>
</head>
<body>
    <script>
        function requestData(url, callback) {
            var xhr=new XMLHttpRequest();
            xhr.open('GET', url, true);
            xhr.onreadystatechange=function() {
                if (xhr.readyState===4 && xhr.status===200) {
                    callback(null, xhr.responseText);
                } else if (xhr.readyState===4) {
                    callback(new Error('请求失败'));
                }
            };
            xhr.send();
        }

        requestData('https://api.example.com/data', function(error, data) {
            if (error) {
                console.error('发生错误:', error);
            } else {
                console.log('接收到的数据:', data);
            }
        });
    </script>
</body>
</html>

在这个例子中，我们定义了一个名为requestData的函数，它接收一个URL和一个回调函数作为参数。requestData函数内部创建一个XMLHttpRequest对象，并在请求完成时调用回调函数，传递错误对象或响应数据。

示例3：定时器回调

JavaScript定时器函数setTimeout和setInterval也使用回调函数。以下是一个使用setTimeout的例子。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>回调函数示例：定时器</title>
</head>
<body>
    <script>
        function delayLog(message, delay) {
            setTimeout(function() {
                console.log(message);
            }, delay);
        }

        delayLog('3秒后的消息', 3000);
    </script>
</body>
</html>

在这个例子中，delayLog函数接收一个消息和一个延迟时间（毫秒）作为参数。它使用setTimeout来延迟执行一个匿名函数，该函数将在指定的延迟后输出消息。

结论

回调函数是JavaScript编程的基石之一，它们提供了一种处理异步操作和事件的强大手段。理解并正确使用回调函数对于任何前端工程师来说都是至关重要的。通过本文的例子，我们可以看到回调函数在实际编程中的多种应用场景，希望这些例子能帮助你更好地理解回调函数的工作原理和使用方法。

调函数

定义：回调函数就是一个通过函数指针调用的函数。如果你把函数的指针（地址）作为参数传递给另一个函数，当这个指针被用来调用其所指向的函数时，我们就说这是回调函数。

案例

案例一：定义一个名为 add 的函数，接收两个参数，将这个两个参数相加，作为返回值。当调用这个函数的时候，就可以得到返回值。

function add(x, y){
    return x + y;
};

var result=add(10, 20);
console.log(result);

运行结果：

说明：像上面的 add 函数，可以直接得到返回值。

案例二：定义一个函数 add，也是接收两个参数，在这个 add 函数中同时定义了一个 setTimeout 函数，想在一秒钟之后，返回这两个参数之和。

演示两种获取不到的方法：

第一种：在 setTimeout 中返回结果

function add(x, y){
    console.log(1);
    setTimeout(function(){
        console.log(2);
        var result=x + y;
        return result;
    }, 1000);
    console.log(3);
};

console.log(add(10, 20));

运行结果：

说明：当输出调用 add 函数的时候，js 代码从上到下执行，当遇到异步的 setTimeout 函数的时候，不会等待异步函数，继续往下执行，当执行 console.log(add(10, 20)); 的时候，函数没有返回值，所以打印出 undefined。

第二种：在外层函数定义一个 result 变量，在 setTimeout 函数里进行赋值。

function add(x, y){
    var result=0;
    setTimeout(function(){
        result=x + y;
    }, 1000);
    return result;
};

console.log(add(20, 20));

运行结果：

说明：js 代码按照顺序执行，当执行到 setTimeout 的时候，不会等待，继续往下执行，所以 result 还是 0。

正确的获取方式：通过定义回调函数获取

function add(x, y, callback){
    setTimeout(function(){
        var result=x + y;
        callback(result);
    }, 1000);
};

add(30, 20, function(result){
    console.log(result);
});

运行结果：

说明：add 函数中的 callback，只是起的名称，意思是回调函数，在输出调用 add 函数的时候，传了 x，y 和一个函数，其实就是将函数的指针（地址）作为参数传递给另一个函数，当这个指针被用来调用时，就是去找 function(result){console.log(result)}。所以在调用add 函数的时候，代码按照正常顺序执行，过了 1 秒之后，执行 setTimeout 里的函数，执行到 callback 的时候，会去执行function(result){console.log(result)}。

路漫漫其修远兮，吾将上下而求索
译文：在追寻真理方面，前方的道路还很漫长，但我将百折不挠，不遗余力地去追求和探索。

如果您有什么好的想法与方法，欢迎在评论区留言，我们一起讨论~

文已经过原作者 dmitripavlutin 授权翻译！

回调函数是每个 JS 开发人员都应该知道的概念之一。回调用于数组，计时器函数，promise，事件处理程序等中。

在本文中，会解释回调函数的概念。另外，还会帮助智米们区分两种回调：同步和异步。

1.回调函数

我们编写一个问候的函数，首先创建一个函数greet(name)，该函数返回欢迎消息：

function greet(name) {
  return `Hello, ${name}!`;
}

greet('小智'); // => 'Hello, 小智!'

如果要向一些人问候怎么做？这里，我们可以使用 array.map() 方法：

const persons = ['小智', '王大冶']
const messages = persons.map(greet)

messages // ["Hello, 小智!", "Hello, 王大冶!"]

persons.map(greet)接受person数组的每一项，并使用每一项作为调用参数来调用函数greet()：greet('小智')，greet('王大冶')。

有趣的是persons.map(greet)方法接受greet()函数作为参数。这样做会使reet()成为回调函数。

persons.map(greet)是一个接受另一个函数作为参数的函数，因此将其命名为高阶函数。

高阶函数承担调用回调函数的全部责任，并为其提供正确的参数。

在前面的示例中，高阶函数persons.map(greet)负责调用greet()回调函数，并将数组的每个项目作为参数：'小智'和'王大冶'。

我们可以可以自己编写使用回调的高阶函数。例如，这里有一个等价的array.map()方法

function map(array, callback) {
  const mappedArray = [];
  for (const item of array) { 
    mappedArray.push(
      callback(item)
    );
  }
  return mappedArray;
}

function greet(name) {
  return `Hello, ${name}!`;
}

const persons = ['小智', '王大冶']

const messages = map(persons, greet);

messages // ["Hello, 小智!", "Hello, 王大冶!"]

map(array, callback)是一个高阶函数，因为它接受回调函数作为参数，然后在它的函数体内部调用回调函数:callback(item)。

2.同步回调

回调的调用方式有两种：同步和异步回调。

同步回调是在使用回调的高阶函数执行期间执行的。

换句话说，同步回调处于阻塞状态：高阶函数要等到回调完成执行后才能完成其执行。

function map(array, callback) {
  console.log('map() 开始');
  const mappedArray = [];
  for (const item of array) { mappedArray.push(callback(item)) }
  console.log('map() 完成');
  return mappedArray;
}

function greet(name) {
  console.log('greet() 被调用 ');
  return `Hello, ${name}!`;
}
const persons = ['小智'];

map(persons, greet);

// map() 开始
// greet() 被调用 
// map() 完成

greet()是一个同步回调函数，因为它与高阶函数map()同时执行。

2.1 同步回调的例子

很多原生 JavaScript 类型的方法都使用同步回调。

最常用的是数组方法，例如array.map(callback)，array.forEach(callback)，array.find(callback)，array.filter(callback)，array.reduce(callback, init)：

// 数组上的同步回调的示例

const persons = ['小智', '前端小智']
persons.forEach(
  function callback(name) {
    console.log(name);
  }
);
// 小智
// 前端小智

const nameStartingA = persons.find(
  function callback(name) {
    return name[0].toLowerCase() === '小';
  }
)
// nameStartingA // 小智

const countStartingA = persons.reduce(
  function callback(count, name) {
    const startsA = name[0].toLowerCase() === '小';
    return startsA ? count + 1 : count;
  }, 
  0
);

countStartingA // 1

3.异步回调

异步回调在执行高阶函数之后执行。

简而言之，异步回调是非阻塞的：高阶函数无需等待回调即可完成其执行，高阶函数可确保稍后在特定事件上执行回调。

在下面的示例中，later()函数的执行延迟为2秒

console.log('setTimeout() 开始')
setTimeout(function later() {
  console.log('later() 被调用')
}, 2000)
console.log('setTimeout() 完成')

// setTimeout() 开始
// setTimeout() 完成
// later() 被调用(2秒后)

3.1 异步回调的示例

计时器函数的异步回调：

setTimeout(function later() {
  console.log('2秒过去了!');
}, 2000);

setInterval(function repeat() {
  console.log('每2秒');
}, 2000);

DOM 事件监听器也是异步调用事件处理函数(回调函数的一种子类型)

const myButton = document.getElementById('myButton');

myButton.addEventListener('click', function handler() {
  console.log('我被点击啦!');
})
// 点击按钮时，才会打印'我被点击啦!'

4. 异步回调函数 vs 异步函数

放在函数定义之前的特殊关键字async创建一个异步函数：

async function fetchUserNames() {
  const resp = await fetch('https://api.github.com/users?per_page=5');
  const users = await resp.json();
  const names = users.map(({ login }) => login);
  console.log(names);
}

fetchUserNames()是异步的，因为它的前缀是async。该函数await fetch('https://api.github.com/users?per_page=5')从 GitHub 前5个用户。然后从响应对象中提取 JSON 数据：await resp.json()。

async函数是 Promise 的语法糖。当遇到表达式await <promise>时（注意，调用fetch()将返回一个 promise），异步函数将暂停执行直到该promise得以解决。

异步回调函数和异步函数是不同的术语。

异步回调函数由高阶函数以非阻塞方式执行。但是异步函数在等待promise（await <promise>）解析时暂停其执行。

但是，我们可以将异步函数用作异步回调！

我们异步函数fetchUserNames()设为单击按钮时调用的异步回调：

const button = document.getElementById('fetchUsersButton');

button.addEventListener('click', fetchUserNames);

总结

回调是一个可以作为参数接受并由另一个函数（高阶函数）执行的函数.

有两种回调函数:同步和异步。

同步回调函数与使用回调函数的高阶函数同时执行，同步回调是阻塞的。另一方面，异步回调的执行时间比高阶函数的执行时间晚，异步回调是非阻塞的。

完~，感谢大家的观看，我是小智，我去刷碗啦！

作者：Shadeed 译者：前端小智来源：dmitripavlutin 原文：https://dmitripavlutin.com/javascript-variables-practices/

在线咨询

上一篇：你应该知道的七种 JavaScript 错误类型
下一篇：javascript中用reduce高阶函数组装查询

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

JavaScript 回调

什么是回调函数？

示例1：事件监听回调

示例2：异步操作回调

示例3：定时器回调

结论

调函数

案例

正确的获取方式：通过定义回调函数获取

1.回调函数

2.同步回调

2.1 同步回调的例子

3.异步回调

3.1 异步回调的示例

4. 异步回调函数 vs 异步函数

总结

您的项目需求