Question

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

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);                              
   }
}

有任何想法要解决这个问题吗？

Answer 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>

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

1 个答案: