谈谈JavaScript自定义回调函数

什么是回调函数？

回调函数是一种特殊的函数，它作为参数传递给另一个函数并且在主函数执行完成后被调用。通常情况下，回调函数用于处理异步操作。比如，当一个网络请求完成时，需要回调函数来处理返回的数据。

JavaScript自定义回调函数的基本用法

在JavaScript中，我们可以通过自定义函数来实现回调函数的功能。下面是一个示例：

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

// 回调函数
function displayData(data) {
  console.log(data);
}

// 调用 fetchData 函数，并传入回调函数 displayData
fetchData("https://jsonplaceholder.typicode.com/posts/1", displayData);

在这个示例中，我们自定义了一个 fetchData 函数，该函数接收两个参数：url 和 callback。callback 是一个回调函数，在网络请求成功后会被 fetchData 函数调用。在这里，我们定义了一个 displayData 函数来处理返回的数据。

示例1：使用回调函数处理数组元素

下面是一个使用回调函数处理数组元素的示例：

function mapArray(arr, callback) {
  const result = [];
  for (let i = 0; i < arr.length; i++) {
    const mapped = callback(arr[i], i);
    result.push(mapped);
  }
  return result;
}

// 回调函数
function double(num) {
  return num * 2;
}

const numbers = [1, 2, 3, 4, 5];
const doubled = mapArray(numbers, double);
console.log(doubled);  // 输出 [2, 4, 6, 8, 10]

在这个示例中，我们自定义了一个 mapArray 函数，该函数接收两个参数：arr 和 callback。callback 是一个回调函数，在处理数组元素时会被 mapArray 函数调用。在这里，我们定义了一个 double 函数来处理数组元素。

示例2：使用回调函数实现简单计时器

下面是一个使用回调函数实现简单计时器的示例：

function countdown(n, callback) {
  let count = n;
  const timer = setInterval(() => {
    count--;
    if (count === 0) {
      clearInterval(timer);
      callback();
    }
  }, 1000);
}

// 回调函数
function timeIsUp() {
  console.log("Time is up!");
}

countdown(3, timeIsUp);  // 计时器从3开始，倒计时到0后，回调 timeIsUp 函数

在这个示例中，我们自定义了一个 countdown 函数，该函数接收两个参数：n 和 callback。callback 是一个回调函数，在计时器倒计时到0时会被 countdown 函数调用。在这里，我们定义了一个 timeIsUp 函数来处理倒计时结束后的任务。

总结

通过自定义回调函数，我们可以灵活地处理异步操作和处理数据。回调函数是 JavaScript 编程中不可缺少的部分。理解回调函数的基本用法和实现原理可以提高我们的编程能力和代码质量。