javascript - 如何防止我的 jQuery slider 使用 .stop() 获取 “overClicks” {或您建议使用的任何其他内容)

Question

我的 WP 网站上有一个 jQuery slider 。

当重复点击(点击之间没有等待)箭头移动幻灯片时，它会继续滑动更多幻灯片+我有一个“addClass”和“removeClass”，使中心的图像变大和变小

如何在恭敬地点击时创建点击暂停？

这是我的代码部分:

/**************** Slider STUFF ****************/

//relevant slide parameters: 
var singleSlide         = '14.5em'; 
var slideAnimationSpeed = 500;
var currentSlide        =  5;

//cache DOM
var $slider         = $('.slider'); 
var $slideContainer = $slider.find('.slides'); 
var $slides         = $slideContainer.find('.slide');
var totalSlides     = $slides.length;

console.log('Total Slides: '+ totalSlides);

// Adds an Id to all li-images 
$slides.attr('id', function(i) {
   return 'slide_'+(i+1);
});

//Add a shadowe for the next Client 
function addTheShadowRight(currentSlide){
    nextSlide = currentSlide + 1 ;
    $('#slide_'+currentSlide).removeClass("sliderPoiner");
    $('#slide_'+nextSlide).addClass("sliderPoiner");
}

//Add a shadowe for the previous Client 
function addTheShadowleft(currentSlide){
    prevSlide = currentSlide - 1 ;
    $('#slide_'+currentSlide).removeClass("sliderPoiner");
    $('#slide_'+prevSlide).addClass("sliderPoiner");
}

//When clicking on the right: 
$('.scroll-right').click(function(){
    //margin-left the slide including -= :
    $slideContainer.stop().animate({'margin-left': '-='+singleSlide}, slideAnimationSpeed, function(){
        currentSlide++;
        console.log('Current Slide: '+ currentSlide);
        if ((currentSlide+1) === totalSlides) {
            $('#slide_'+currentSlide).removeClass("sliderPoiner");              
            currentSlide = 5;
            $('#slide_'+currentSlide).addClass("sliderPoiner");
            $slideContainer.css('margin-left', '-42em');
        }
    });
    addTheShadowRight(currentSlide);
})

//When clicking on the left: 
$('.scroll-left').click(function(){
    //margin-left the slide including -= :
    $slideContainer.stop().animate({'margin-left': '+='+singleSlide}, slideAnimationSpeed, function(){
        currentSlide--;
        console.log('Current Slide: '+ currentSlide);
        if ((currentSlide) === 3) {
            $('#slide_'+currentSlide).removeClass("sliderPoiner");                              
            currentSlide = 24;
            $('#slide_'+currentSlide).addClass("sliderPoiner");
            $slideContainer.css('margin-left', '-317.5em');  
        }
    });
    addTheShadowleft(currentSlide);
})




// ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~

我在 .animate 之前使用了 .stop() 函数 - 但似乎什么也没发生。

注意:当点击箭头并在每次点击之间等待时，它滑动得很好。问题仅在快速单击时出现。

Answer 1

如何使用 setTimeout() 设置全局变量

//Global var
var timeout = false;

//When clicking on the right: 
$('.scroll-right').click(function(){
    //only do stuff when timeout is false
    if (!timeout) {
        //margin-left the slide including -= :
        $slideContainer.stop().animate({'margin-left': '-='+singleSlide}, slideAnimationSpeed, function(){
            currentSlide++;
            console.log('Current Slide: '+ currentSlide);
            if ((currentSlide+1) === totalSlides) {
                $('#slide_'+currentSlide).removeClass("sliderPoiner");              
                currentSlide = 5;
                $('#slide_'+currentSlide).addClass("sliderPoiner");
                $slideContainer.css('margin-left', '-42em');
            }
        });
        addTheShadowRight(currentSlide);

        //set timeout to true and back to false after 500 milliseconds
        timeout = true;
        setTimeout(function(){ 
            timeout = false;
        }, 500);
    }
});

所以基本上快速点击按钮不会触发该功能。哪个应该可以解决您的问题。

你可以对 scroll-left 做同样的事情

注意:这可能不是最佳解决方案，但应该可行。

更新:要禁用双击选择，您可以使用:

function clearSelection() {
    if(document.selection && document.selection.empty) {
        document.selection.empty();
    } else if(window.getSelection) {
        var sel = window.getSelection();
        sel.removeAllRanges();
    }
}

或者你可以使用这个 CSS 技巧:

span.no_selection {
    -webkit-user-select: none; /* webkit (safari, chrome) browsers */
    -moz-user-select: none; /* mozilla browsers */
    -khtml-user-select: none; /* webkit (konqueror) browsers */
    -ms-user-select: none; /* IE10+ */
}

请记住这是您要禁用的默认浏览器行为。

Source