【Javascript】callback是什么

在 JavaScript 中，回调函数（Callback）是一种非常常用的设计模式，它允许你将一个函数作为参数传递给另一个函数，并在适当的时候调用这个函数。这种模式在异步编程中尤其重要，因为它可以让你在某些事件发生或者操作完成之后执行特定的代码。

回调函数的基本概念
回调函数是一个被传递给另一个函数的函数，目的是为了在一个不确定的时间点执行特定的操作，通常是异步操作完成时。

回调函数的使用场景

• 异步操作：比如 AJAX 请求、定时器等。
• 事件处理：如按钮点击事件。
• 数组方法：如 map, filter, reduce 等。

示例：

1、使用 setTimeout

function greet(name, callback) {
  console.log("Hello " + name);
  callback(); // 调用回调函数
}

function sayGoodbye() {
  console.log("Goodbye!");
}

greet("John", sayGoodbye);
// 输出：
// Hello John
// Goodbye!

2、使用 setInterval

function repeatAction(callback) {
  setInterval(callback, 1000);
}

function printTime() {
  console.log(new Date().toLocaleTimeString());
}

repeatAction(printTime);
// 输出（每秒输出当前时间）：
// 14:08:28
// 14:08:29
// 14:08:30
// 14:08:31
// 14:08:32
// 14:08:33
// 14:08:34
// ……

3、使用 AJAX，在接口返回时回调

function fetchData(url, callback) {
  const xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      callback(xhr.responseText);
    }
  };
  xhr.open("GET", url, true);
  xhr.send();
}

function displayData(data) {
  console.log("Data:", data);
}

fetchData("https://api.example.com/data", displayData);

4、使用 Array.prototype.map

const numbers = [1, 2, 3, 4, 5];

function square(num) {
  return num * num;
}

const squares = numbers.map(square);
console.log(squares);

// 输出：[1, 4, 9, 16, 25]

回调函数的问题
尽管回调函数非常有用，但也存在一些问题，比如：

• 回调地狱（Callback Hell）：当多个异步操作嵌套在一起时，代码会变得难以阅读和维护。
• 错误处理：错误处理在回调函数中往往比较复杂，尤其是在嵌套的回调中。

解决方案
为了解决这些问题，JavaScript 社区引入了一些新的概念和技术，比如 Promises 和 async/await，它们可以更优雅地处理异步操作。

示例：使用 Promises

function fetchNumber() {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      const randomNumber = Math.floor(Math.random() * 10);
      if (randomNumber > 5) {
        resolve(randomNumber);
      } else {
        reject(new Error("Number too small"));
      }
    }, 1000);
  });
}

fetchNumber()
  .then(function(number) {
    console.log("Fetched number:", number);
  })
  .catch(function(error) {
    console.error("Error:", error.message);
  });

// 输出随机数：
// Fetched number: 7

示例：使用 async/await

async function fetchNumber() {
  try {
    const randomNumber = await new Promise((resolve, reject) => {
      setTimeout(() => {
        const number = Math.floor(Math.random() * 10);
        if (number > 5) {
          resolve(number);
        } else {
          reject(new Error("Number too small"));
        }
      }, 1000);
    });

    console.log("Fetched number:", randomNumber);
  } catch (error) {
    console.error("Error:", error.message);
  }
}

fetchNumber();

通过使用 Promises 和 async/await，我们可以避免回调地狱，并使异步代码更加清晰和易于理解。