CSS 回调函数

两年前，在2023年3月，我发布了一篇名为“前端开发的终结”的博客文章。这是OpenAI发布其GPT-4展示之后，普遍的反应是人类软件开发者即将被淘汰，软件将很快完全由机器编写。

回调函数（Callback Function）的定义123

回调函数（Callback Function）是一种在编程中常用的概念，它指的是一个作为参数传递给另一个函数，并在特定条件满足时被调用的函数。

回调函数（Callback Function）的定义123

回调函数（Callback Function）是一种在编程中常用的概念，它指的是一个作为参数传递给另一个函数，并在特定条件满足时被调用的函数。

回调函数（Callback Function）的定义123

回调函数（Callback Function）是一种在编程中常用的概念，它指的是一个作为参数传递给另一个函数，并在特定条件满足时被调用的函数。

简单理解

想象一下java现实生活中的例子：MDX

你告诉朋友："到了给我打电话" 这里的"打电话"就是一个回调函数 "到了"是触发条件

基本概念

Here’s what the actual CSS looks like for the linear() animation graphed above:

Java案例：

//用户类
public class User {
    private String name;
    private int age;

    // 构造方法
    public User(String name, int age) {
        this.name = name;
        this.age = age;
    }

    // Getter 和 Setter 方法
    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public int getAge() {
        return age;
    }

    public void setAge(int age) {
        this.age = age;
    }
}

import { styled } from "@linaria/react";

const Wrapper = styled.div`
  background: red;
`;

// 回调函数就是一个被当作参数传递的函数
function doSomething(callback) {
  // 执行一些操作...
  console.log("任务完成前");

  // 在适当的时候调用回调函数
  callback();

  console.log("任务完成后");
}

// 使用
doSomething(function () {
  console.log("这是回调函数被执行了！");
});

输出：任务完成前这是回调函数被执行了！任务完成后

常见使用场景

异步操作
事件处理

// 读取文件后执行回调
fs.readFile("file.txt", "utf8", function (error, data) {
  if (error) {
    console.error("读取文件出错:", error);
    return;
  }
  console.log("文件内容:", data); // 这是回调函数
});

console.log("继续执行其他任务...");

事件处理

// 点击按钮时执行回调
button.addEventListener("click", function (event) {
  console.log("按钮被点击了！"); // 这是回调函数
});

数组方法

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

// forEach 的回调
numbers.forEach(function(number) {
console.log(number) // 对每个元素执行这个回调
})

// map 的回调
const doubled = numbers.map(function(number) {
return number \* 2 // 对每个元素执行这个回调
})

定时器

// setTimeout 的回调
setTimeout(function () {
  console.log("3 秒后执行"); // 这是回调函数
}, 3000);

回调函数的类型;

同步回调;

// 立即执行的回调
function calculate(a, b, operation) {
  return operation(a, b); // 立即调用
}

const result = calculate(5, 3, function (x, y) {
  return x + y;
});
console.log(result); // 8

异步回调

// 延迟执行的回调
function fetchData(callback) {
  setTimeout(function () {
    const data = { name: "张三", age: 25 };
    callback(data); // 异步调用
  }, 1000);
}

fetchData(function (userData) {
  console.log("收到数据:", userData);
});
console.log("继续执行...");

实际示例用户登录流程

function login(username, password, onSuccess, onError) {
  // 模拟登录请求
  setTimeout(function () {
    if (username === "admin" && password === "123456") {
      const user = { id: 1, name: username };
      onSuccess(user); // 成功回调
    } else {
      onError("用户名或密码错误"); // 失败回调
    }
  }, 1000);
}
// 使用回调
login(
  "admin",
  "123456",
  function (user) {
    // 成功回调
    console.log("登录成功:", user);
  },
  function (error) {
    // 失败回调
    console.log("登录失败:", error);
  }
);

文件处理

function processFile(filename, processLine, onComplete) {
  const lines = ["第一行", "第二行", "第三行"];

  // 处理每一行
  lines.forEach(function (line, index) {
    processLine(line, index); // 每行处理回调
  });

  onComplete(lines.length); // 完成回调
}

// 使用
processFile(
  "data.txt",
  function (line, index) {
    // 处理每行的回调
    console.log(`第${index + 1}行: ${line}`);
  },
  function (totalLines) {
    // 完成回调
    console.log(`处理完成，共${totalLines}行`);
  }
);

现代替代方案虽然回调函数很重要，但现在更常用： Promise

// 代替回调的嵌套
fetchData()
  .then(function (data) {
    return processData(data);
  })
  .then(function (result) {
    console.log(result);
  })
  .catch(function (error) {
    console.error(error);
  });

Async/Await

// 更同步的写法
async function main() {
  try {
    const data = await fetchData();
    const result = await processData(data);
    console.log(result);
  } catch (error) {
    console.error(error);
  }
}

总结

回调函数的核心特点：

作为参数传递 - 函数被当作"值"来传递
在特定时机执行 - 不是立即执行，而是在某个条件满足时
实现控制反转 - 执行权交给接收回调的函数优点：灵活、可以实现异步编程缺点：容易产生"回调地狱"，代码难以维护理解回调函数是学习 JavaScript 异步编程的基础！