回调函数模式

回调函数模式

回调函数是JavaScript中处理异步操作的基础机制。函数作为参数传递给另一个函数，并在特定条件满足时被调用执行。这种模式在事件处理、定时任务、网络请求等场景中广泛应用。

基本概念

回调函数的核心是将函数作为一等公民对待。在JavaScript中，函数可以像其他数据类型一样被传递：

function greet(name, callback) {
  console.log(`Hello, ${name}!`);
  callback();
}

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

greet('Alice', sayGoodbye);
// 输出:
// Hello, Alice!
// Goodbye!

同步与异步回调

回调分为同步和异步两种形式。同步回调在函数执行过程中立即调用：

function syncOperation(data, transform) {
  const result = transform(data);
  console.log(result);
}

syncOperation([1, 2, 3], arr => arr.map(x => x * 2));
// 输出: [2, 4, 6]

异步回调则在未来某个时间点执行：

function asyncOperation(callback) {
  setTimeout(() => {
    callback('Operation completed');
  }, 1000);
}

asyncOperation(message => console.log(message));
// 1秒后输出: Operation completed

常见应用场景

事件处理

DOM事件监听是最典型的回调应用：

document.getElementById('myButton').addEventListener('click', function() {
  console.log('Button clicked!');
});

定时器

setTimeout和setInterval都依赖回调：

let counter = 0;
const timerId = setInterval(() => {
  counter++;
  console.log(`Tick ${counter}`);
  if (counter >= 5) clearInterval(timerId);
}, 1000);

网络请求

传统XMLHttpRequest使用回调：

function fetchData(url, success, error) {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', url);
  xhr.onload = () => success(xhr.responseText);
  xhr.onerror = () => error(xhr.statusText);
  xhr.send();
}

fetchData('https://api.example.com/data',
  data => console.log('Success:', data),
  err => console.error('Error:', err)
);

回调地狱问题

多层嵌套回调会导致代码难以维护：

getUser(userId, function(user) {
  getOrders(user.id, function(orders) {
    getOrderDetails(orders[0].id, function(details) {
      updateUI(details, function() {
        // 更多嵌套...
      });
    });
  });
});

错误处理模式

回调通常遵循错误优先的约定：

function asyncTask(callback) {
  try {
    const result = doSomething();
    callback(null, result);
  } catch (err) {
    callback(err);
  }
}

asyncTask((err, data) => {
  if (err) {
    console.error('Error:', err);
    return;
  }
  console.log('Data:', data);
});

高级模式

回调队列

实现任务队列处理：

class CallbackQueue {
  constructor() {
    this.queue = [];
    this.processing = false;
  }

  add(callback) {
    this.queue.push(callback);
    if (!this.processing) this.process();
  }

  process() {
    this.processing = true;
    const next = () => {
      if (this.queue.length === 0) {
        this.processing = false;
        return;
      }
      const cb = this.queue.shift();
      cb(next);
    };
    next();
  }
}

可取消回调

实现回调取消机制：

function cancellable(callback) {
  let cancelled = false;
  const wrapper = (...args) => {
    if (!cancelled) callback(...args);
  };
  wrapper.cancel = () => { cancelled = true; };
  return wrapper;
}

const cb = cancellable(() => console.log('Executed'));
setTimeout(cb, 1000);
cb.cancel(); // 不会执行

性能考量

回调模式需要注意：

1. 避免在热路径中创建过多函数对象
2. 注意闭包内存泄漏
3. 合理控制调用栈深度

// 低效做法
for (let i = 0; i < 1000; i++) {
  setTimeout(() => console.log(i), 0);
}

// 优化方案
function log(i) { console.log(i); }
for (let i = 0; i < 1000; i++) {
  setTimeout(log, 0, i);
}

与现代异步模式的对比

虽然Promise和async/await更流行，但回调仍有其优势：

// 回调版本
function oldStyle(callback) {
  doAsyncThing((err, val) => {
    if (err) return callback(err);
    doAnotherAsyncThing(val, (err, val2) => {
      callback(err, val2);
    });
  });
}

// Promise版本
function newStyle() {
  return doAsyncThing()
    .then(doAnotherAsyncThing);
}

// async/await版本
async function newestStyle() {
  const val = await doAsyncThing();
  return await doAnotherAsyncThing(val);
}

Node.js风格回调

Node.js标准库普遍采用特定格式：

const fs = require('fs');

fs.readFile('/path/to/file', 'utf8', (err, data) => {
  if (err) throw err;
  console.log(data);
});

这种模式的特点是：

1. 回调作为最后一个参数
2. 错误作为第一个参数
3. 成功时后续参数包含结果

浏览器环境差异

浏览器API的回调风格各异：

// IndexedDB
const request = indexedDB.open('myDB');
request.onsuccess = function(event) { /*...*/ };
request.onerror = function(event) { /*...*/ };

// Web Workers
worker.onmessage = function(event) { /*...*/ };

// Geolocation
navigator.geolocation.getCurrentPosition(
  position => console.log(position),
  error => console.error(error)
);

测试回调函数

测试异步回调需要特殊处理：

// 使用Jest测试回调
function fetchData(callback) {
  setTimeout(() => callback('data'), 100);
}

test('fetchData calls callback with data', done => {
  function callback(data) {
    expect(data).toBe('data');
    done();
  }
  fetchData(callback);
});

调试技巧

调试回调时可以采用这些方法：

1. 添加日志点：

function callback(data) {
  console.log('Callback entered with:', data);
  // 原始逻辑
}

2. 使用debugger语句：

function callback() {
  debugger;
  // 逻辑代码
}

3. 包装回调进行追踪：

function traceCallback(cb) {
  return function() {
    console.trace('Callback triggered');
    return cb.apply(this, arguments);
  };
}

button.addEventListener('click', traceCallback(handler));

历史演变

回调模式经历了几个发展阶段：

1. 早期简单的回调
2. jQuery的Deferred对象
3. CommonJS的Promise/A+规范
4. ES6原生Promise
5. async/await语法糖

设计原则

良好的回调设计应考虑：

1. 明确的调用时机文档
2. 一致的参数顺序
3. 合理的错误处理
4. 避免副作用
5. 适当的性能优化

// 良好的设计示例
function createTimer(duration, callback) {
  // 参数验证
  if (typeof duration !== 'number') {
    throw new TypeError('Duration must be a number');
  }
  if (typeof callback !== 'function') {
    throw new TypeError('Callback must be a function');
  }
  
  // 明确的行为
  const timerId = setTimeout(() => {
    callback({
      startedAt: Date.now(),
      duration
    });
  }, duration);
  
  // 提供取消接口
  return {
    cancel: () => clearTimeout(timerId)
  };
}