快速鼠标移动时jQuery清除队列

【问题标题】：jQuery clear queue when fast mouse move快速鼠标移动时jQuery清除队列
【发布时间】：2014-03-21 20:11:23
【问题描述】：

我有一个带有缩略图条的轮播。功能处于悬停状态，其主图像已加载到轮播。这工作正常。但是如果用户在拇指上快速移动并在一个拇指上停止，它不会加载当前停止的索引，而是在鼠标移动时在索引之间加载。

thumbnail.hover(
  function() {
   if (!$(this).hasClass('select'))
    $(this).addClass('over');
    var index = parseInt($(this).data('index'), 10);

        if(!$(this).attr('href')){
          slideshowManuallyPaused = true;
          stopSlideshow();
          var delayOfHover = setTimeout(function () {
            gotoSlide(index);       
            clearInterval(delayOfHover);
          }, 200);                              
   }
}

有办法解决这个问题吗？

【问题讨论】：

在函数外定义间隔，每次悬停新元素时清除它。
@Syd 不，它不起作用。

标签： javascript jquery

【解决方案1】：

这可能会对你有所帮助，虽然我没有你所有的代码：

DEMO

javascript：

$(document).ready(function(){

    var timer = null; 
    var thumb = $('.thumb');

    thumb.hover(function(){

        var i = thumb.index(this);
        console.log('over thumb: ' + i);

        $(this).addClass('over');

        timer = setTimeout(function(){
            console.log('executing code for thumb: ' + i);
        },500);


    },function(){

        var i = thumb.index(this);
        console.log('left thumb: ' + i);

        $(this).removeClass('over');
        clearTimeout(timer);
    })

})

html:

<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>

【讨论】：