如何为JavaScript添加Timeout函数？我的实现代码为何无法运行？

安全阿岳

2026-5-29

问题分析与解决方案

你的代码无法正常运行主要有两个核心问题，咱们一步步拆解：

1. `$this` 变量未定义，作用域冲突

在 setTimeout 的回调函数内部，this 的指向已经不再是你点击的按钮元素了——浏览器环境下它会默认指向全局的 window 对象，而你直接使用的 $this 从来没有被声明或赋值，所以浏览器会抛出变量未定义的错误。

解决这个问题的关键是提前把当前按钮的 jQuery 对象存下来，让回调函数能访问到它：

2. 确保 `button('reset')` 方法可调用

button('reset') 是 Bootstrap 按钮组件提供的专属方法，如果你没有引入 Bootstrap 的 JavaScript 文件，或者按钮没有按照 Bootstrap 的规范初始化，这个方法也会失效。

修正后的代码示例

方法一：提前存储按钮对象（最稳妥的兼容写法）

$('.btn').click(function() {
  // 把当前按钮的jQuery对象存入变量，避开作用域问题
  const $currentBtn = $(this);
  $currentBtn.toggleClass('spinner');
  
  setTimeout(function() {
    // 使用提前保存的变量操作按钮
    $currentBtn.button('reset');
  }, 8000);
});

方法二：用箭头函数简化作用域（ES6+ 环境适用）

箭头函数不会改变 this 的指向，内部的 this 会和外部 click 回调保持一致：

$('.btn').click(function() {
  $(this).toggleClass('spinner');
  
  setTimeout(() => {
    // 箭头函数里的this就是点击的按钮
    $(this).button('reset');
  }, 8000);
});