Javascript 如何防止我的jQuery滑块使用.stop（）获得“过度点击”{或您建议使用的任何其他工具）

我的WP网站上有一个jQuery滑块

当重复单击而不等待在箭头上的单击之间移动幻灯片时，它会继续滑动更多幻灯片+我有一个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函数，但似乎什么都没有发生

---

注意：当单击箭头并在每次单击之间等待时，它会滑动良好。问题只是在快速单击时。

您尝试执行的操作称为限制或取消限制。有多个插件可用于执行此操作，但我推荐Ben Allman。只需将您的单击处理程序包装在限制功能中：

$('.scroll-right').click(function(){
     $.throttle(250, function(){
          //handle click event
     });
});

插件中还有一个debounce函数，但听起来油门就是你想要的。差别很小，但debounce不会启动处理程序，直到用户完成，这意味着他/她停止点击一两秒钟。

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

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

您可以对“向左滚动”执行相同的操作

注意：这可能不是最好的解决方案，但应该可以

更新：要禁用双击选择，可以使用以下选项：

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+ */
}

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

---

好的，这里有一个保存了时间戳的解决方案：

var lastClick = 0;
//When clicking on the left: 
$('.scroll-left').click(function(e){
    if(lastClick + slideAnimationSpeed > Date.now()) {
        return e.preventDefault();
    }
    lastClick = Date.now();

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

确保为实现相同的块。向右滚动

并不是说您可以通过添加

if (!Date.now) {
  Date.now = function now() {
    return new Date().getTime();
  };
}

---

请参阅

设置超时可能会解决快速单击问题？存储单击的时间戳，并拒绝在slideAnimationSpeed时间量过去之前发生的所有成功单击。伪代码：。ClickFunction{如果lastClick+slideAnimationSpeed>time e.preventDefault}我曾想过使用类似的东西。但是，IDK..对于这个@patman，必须有一个更具体的解决方案。不知道你的意思是什么，如何解释？BramDriesen你能告诉我如何在我的代码上应用setTimeout吗？嗯，我有点担心它是一个插件..但我会在几分钟后测试它。要添加脚本插件，我需要只需包含在this:right？@Hatul中-是的，但我会下载代码并在您的脚本文件夹中本地提供。GitHub并不是真正设计为CDN的。另外，确保脚本标记位于jQuery本身的标记之后。当过度单击箭头时-它可以工作！但是！它会标记所有内容。-只是为了确保我理解设置超时。在完成所有“单击”操作后，将变量转换为true，然后给它半秒钟的时间，然后将其转换为true。我是否理解正确？-我不确定这是否是最佳解决方案，但我将等待更多关于此的评论。非常感谢！如果我找不到任何解决方案，我会将其标记为已解决。@Hatul That sel问题是默认的浏览器行为。当你双击某个东西时，它会选择文本。我想你可以用这个=>是的，你是对的。当你点击它时，它会将变量timeout设置为true，并设置超时。因此，如果你在超时期间点击按钮，它在超时之前不会再做你的事情out将变量设置回false。@Hatul尝试了这段代码来禁用双击选择？我将代码添加到了我的回答中，或者您可以使用e.preventDefault，正如我在回答否决此选项的人时所指出的：请解释原因？这是一个比带有超时的答案更完整的答案。请参阅双击选择问题。以及因此，这是一个完全有效的解决方案。