Question

我正在尝试在运行更多代码之前在.hover（）回调中添加一个小延迟。当你悬停另一个触发相同.hover（）函数的elem时，我还需要停止计时器。我目前有它的工作，但它不漂亮，我正在为全局分配一个计时器，并确定必须有一个更好的方法来做到这一点。

这就是我所拥有的：

PACKAGES.activity_icons.hover(function() {

  // If a timer exists kill it here becuase we don't want the 
  // functions in the timer called if we are hovering on another icon
  if(typeof image_restore_timer != 'undefined')
  {
   clearTimeout(image_restore_timer);
  }

  // Only swap image if icon has a class
  if($(this).attr('class') !== '')
  {
   $(this).closest('.package').find('.left_wrap > img').hide();
   // Show the image with the same class as the icon we hovered
   $(this).closest('.package').find('.left_wrap img.'+$(this).attr('class')).show();
  }

 }, function() {

  var this_ref = $(this);

  // Store timer in a global and restore images after a pause
  image_restore_timer = setTimeout(function() {
   (function(el) {
    el.closest('.package').find('.left_wrap img.'+this_ref.attr('class')).hide();
    el.closest('.package').find('.left_wrap > img:eq(0)').fadeIn('slow');
   })(this_ref)
  }, 1000);

 });

Answer 1

您可以使用$.data()为每个元素（而不是全局元素）存储一个计时器，如下所示：

PACKAGES.activity_icons.hover(function() {
  clearTimeout($.data(this, 'timer'));

  if(this.className === '') return;
  $(this).closest('.package').find('.left_wrap > img').hide()
                       .end().find('.left_wrap img.'+ this.className).show();
}, function() {
  var el = this;
  $.data(this, 'timer', setTimeout(function() {
    $(el).closest('.package').find('.left_wrap img.' + el.className).hide()
                       .end().find('.left_wrap > img:eq(0)').fadeIn('slow');
  }, 1000));
});

其他更改只是一些优化，主要的想法是使用$.data()存储计时器并清除相同的计时器。此外，clearTimeout()对于null或已经运行的计时器不会出错，因此您可以在不进行检查的情况下调用它。

Answer 2

您正在寻找hoverIntent插件。

在.hover（）回调中调用函数之前添加延迟

2 个答案: