Javascript 在X秒后删除类？

我正在尝试以下代码：

$(document).ready(function() {

        $("button").hover(

            function() {
                $(this).addClass("active");
            },

            function() {
                $(this).removeClass("active");
            }
        );

    });

试试这个：

根据您在前面的评论中所说的，您尝试了

setTimeout

，但由于您使用

this

的方式，它并没有起作用。超时函数中的

this

的值与外部函数中的值不同，因此jQuery与按钮元素不匹配

最好将按钮一次性定义为变量，并重用使用重复jQuery选择器的变量

更新：这里有一个稍微复杂的版本，可以防止

setTimeout

计时器堆积：

$(function() {
  var button = $('button');
  var timeout = 0;

  button.hover(
    function() {
      button.addClass('active');

      timeout = setTimeout(function() {
        button.removeClass('active');
        timeout = 0;
      }, 2000);
    },
    function() {
      button.removeClass('active');

      if (timeout) {
        clearTimeout(timeout);
        timeout = 0;
      }
    }
  );
});

我已经为此创建了一个jQuery扩展！这在web开发中非常常见：

$.fn.addTempClass=函数（tempClass，持续时间）{
如果（！tempClass）
归还这个；
返回此值。每个（函数（）{
var$elm=$（此），
定时器；
$elm.addClass（临时类）；
//清除任何超时（如果有）
clearTimeout（$elm.data（'timeout'））
计时器=设置超时（函数（）{
$elm.removeClass（tempClass.removeData（'timeout'）；
}，持续时间| | 100）；
//在元素上设置计时器
$elm.data（'超时'，计时器）；
});
};
setTimeout（…）
您的用例是什么，您试图解决什么问题？因为是的，这当然可以像你描述的那样完成，但我怀疑有更好的/替代的方法。我在hover上添加了一个类，希望在x秒后删除它。尝试下面的代码，但没有发生（使用jquery3.21.1.min.js）。setTimeout（function（）{$（this）.removeClass（“active”）；}，5000）@DavidThomas——我自己在过去的几年（超过十年）中有无数这样的用例，这是一个非常常见的需要，所以我为此编写了一个扩展。请看下面我的答案。我尝试了这个代码，它对我有效。唯一的区别是通过变量声明。谢谢。干杯
$(function() {
  var button = $('button');
  var timeout = 0;

  button.hover(
    function() {
      button.addClass('active');

      timeout = setTimeout(function() {
        button.removeClass('active');
        timeout = 0;
      }, 2000);
    },
    function() {
      button.removeClass('active');

      if (timeout) {
        clearTimeout(timeout);
        timeout = 0;
      }
    }
  );
});