如何使用计时器创建选项卡悬停

Question

如下：（鼠标悬停）

----------------
|    Tab 01    |    Tab 02     
-------------------------------
| Tab 01 - Active             |
|                             |
|                             |
-------------------------------

第一个选项卡（Tab 01）处于活动状态，但是当我将鼠标移到第二个选项卡（Tab 02）上时：

               ----------------
     Tab 01    |    Tab 02    |
-------------------------------
| Tab 02 - Active             |
|                             |
|                             |
-------------------------------

第一个标签页应等待2秒钟，然后才能激活第二个标签页。

我采用了此示例中给出的代码：https://jsfiddle.net/QA5Zp/25/

我通过上面的链接更改了代码，如下所示：

$('.tabbox').on('mouseenter', function(){
   $('.tabbox').removeClass('active');
    setTimeout(function(){ $(this).addClass('active'); } , 2000);
});

因此，当我第二次发烧（鼠标悬停时，它将隐藏内容。

可能是什么原因，我在做什么错？

Answer 1

[当您离开标签页时，超时已开始倒计时。当您离开当前标签页或移至另一个标签页[fiddle）时，您需要清除超时：

var timeout;

$('.tabbox')
  .on('mouseleave', function() {
    clearTimeout(timeout);
  })
  .on('mouseenter', function() {
    var $this = $(this);
    clearTimeout(timeout);
    timeout = setTimeout(function() {
      $('.tabbox').removeClass('active');
      $this.addClass('active');
    }, 2000);
  });