js callback回调函数|极客笔记

js callback回调函数

回调函数是一个非常重要的概念，尤其在 JavaScript 中。在本篇文章中，我们将详细讨论回调函数的概念、用途以及示例代码，帮助读者更好地理解和应用这一概念。

什么是回调函数

js callback回调函数

回调函数是一个作为参数传递给另一个函数的函数。这个概念可以很好地解决异步编程中的问题。当一个异步操作完成时，我们可以通过回调函数来处理结果，而不必阻塞后续代码的执行。

简而言之，回调函数是在一个操作完成后被调用的函数。

为什么需要回调函数

JavaScript 是一门单线程语言，也就是说一次只能执行一个任务。异步操作的出现在一定程度上解决了这个问题，例如 AJAX 请求、定时器等操作。

当执行异步操作时，主线程可以继续执行其他任务，无需等待异步操作完成。一旦异步操作完成，就会触发回调函数，执行预先定义好的逻辑。这样就充分利用了事件循环机制，提高了程序的运行效率。

回调函数的应用场景

回调函数广泛应用于 JavaScript 中，包括但不限于以下场景：

1. AJAX 请求

AJAX 是异步的基础，可以通过回调函数处理服务器返回的数据。例如，我们可以通过以下代码发送一个 GET 请求：

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

fetchData("https://api.example.com/data", function(response) {
  console.log(response);
});

在上述代码中，fetchData 函数接受两个参数：url 和 callback。当请求完成后，会触发 onreadystatechange 事件，此时调用回调函数 callback 来处理返回的数据。

2. 定时器

使用 setTimeout 或 setInterval 函数时，可以传递一个回调函数作为参数，以在指定的时间间隔后执行。

setTimeout(function() {
  console.log("Hello, world!");
}, 2000);

上述代码中，回调函数会在 2 秒后执行，打印出 “Hello, world!”。

3. 事件处理

回调函数还常用于处理各种事件，如按钮点击、表单提交等等。

const button = document.querySelector("button");

button.addEventListener("click", function() {
  console.log("Button clicked.");
});

上述代码中，当按钮被点击时，回调函数就会被调用。

4. 异步操作

回调函数广泛应用于处理异步操作，如文件读写、网络请求等等。通过回调函数，我们可以在异步操作完成后，处理返回结果。

function readFile(path, callback) {
  fs.readFile(path, "utf-8", function(err, data) {
    if (err) {
      callback(err);
    } else {
      callback(null, data);
    }
  });
}

readFile("example.txt", function(err, data) {
  if (err) {
    console.log("Error:", err);
  } else {
    console.log("Data:", data);
  }
});

上述代码中，readFile 函数用于读取文件内容，当读取完成后，会通过回调函数返回结果（要么是数据，要么是错误信息）。