编程中Callback与Fallback的区别是什么？前端新手技术求助

什么是Callback（回调函数） #

回调是一段被当作参数传给另一个函数的代码，只有当特定事件触发、异步操作完成时才会执行。核心是“后续执行”，用来处理异步逻辑或者响应用户/系统事件。

前端常见例子：

• 事件响应：

// 点击按钮后，执行传入的回调函数
document.querySelector('.submit-btn').addEventListener('click', function() {
  console.log('用户提交了表单');
});

这里的匿名函数就是回调，它不会立刻运行，只会在用户点击按钮这个事件发生时触发。

• 异步任务处理：

// 3秒后执行回调
setTimeout(() => {
  alert('时间到了');
}, 3000);

// 请求成功后用回调处理数据
fetch('/api/user')
  .then(res => res.json())
  .then(userData => {
    renderUserInfo(userData);
  });

什么是Fallback（回退/降级方案） #

Fallback是当主功能无法正常工作时的备用方案，核心是“容错”和“兼容”，保证程序在异常环境、低版本浏览器或者资源加载失败时，还能提供基础功能。

前端常见例子：

• CSS属性降级：

/* 旧浏览器不支持grid，就用flex作为回退 */
.card-list {
  display: flex;
  flex-wrap: wrap;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

• 资源加载失败回退：

<!-- 主图片加载失败时，显示备用图 -->
<img src="high-res-photo.png" onerror="this.src='low-res-fallback.png'">

• API兼容性回退：

// 优先用现代的Navigator.geolocation，不支持则提示用户手动输入位置
function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
  } else {
    // 回退逻辑：提示用户手动输入
    alert('你的浏览器不支持定位，请手动输入地址');
  }
}

核心区别总结 #

• 作用场景：Callback用于异步流程控制、事件响应，是主流程的“后续环节”；Fallback用于容错、兼容，是主逻辑走不通时的“Plan B”。
• 触发时机：Callback在特定事件/操作完成时主动触发；Fallback只有在主逻辑失败、不兼容时才会被动启用。
• 逻辑地位：Callback是主流程的必要组成（比如请求成功后必须处理数据）；Fallback是可选的备用逻辑，主逻辑正常运行时它不会生效。

内容的提问来源于stack exchange，提问作者erff-on