Javascript 使用块变量停止多个正在运行的事件

我有一个jQuery滑块，可以从左到右循环浏览图像。 滑块的左侧和右侧也有按钮，允许用户在需要时手动滚动图像

我遇到的问题是，如果多次单击这些按钮，图像将滑出页面，这是因为事件是在列表的left属性超出其边界之前触发的

我试图使用一个变量来阻止用户通过检查当前动画是否已经发生来触发这些事件，但事件似乎仍然会触发。下面是一个正在工作的JSFIDLE，它显示了这个问题

以下是jQuery函数：

$(document).ready(function () {


    var myTimer = setInterval(slide, 2000);
    var blockedSlider = false;

    function slide() {
            var left = $('#sliderList').css('left');
            left = left.substring(0, left.length - 2);
            if (left <= -800) {


                $('#sliderList').css('left', '-400px');
                var slide = $('#sliderList li:first');
                $('#sliderList').children('li:first').remove();
                $('#sliderList').append(slide);
                $('#sliderList').animate({ left: "-=400px" }, "slow", "swing");

            }
            else {
                $('#sliderList').animate({ left: "-=400" }, "slow", "swing");
            }

    }

    $('#sliderLeft').click(function () {
        if (blockedSlider == false) {
            blockedSlider = true;
            var left = $('#sliderList').css('left');
            left = left.substring(0, left.length - 2);
            if (left <= -800) {
                $('#sliderList').css('left', '-400px');
                var slide = $('#sliderList li:first');
                $('#sliderList').children('li:first').remove();
                $('#sliderList').append(slide);
                $('#sliderList').animate({ left: "-=400px" }, "slow", "swing");
                clearInterval(myTimer);
                myTimer = setInterval(slide, 2000);
            }
            else {
                $('#sliderList').animate({ left: "-=400" }, "slow", "swing");
                clearInterval(myTimer);
                myTimer = setInterval(slide, 2000);
            }
            blockedSlider = false;
        }
    });

    $('#sliderRight').click(function () {
        if (blockedSlider == false) {
            blockedSlider = true;
            var left = $('#sliderList').css('left');
            left = left.substring(0, left.length - 2);
            if (left >= 0) {
                $('#sliderList').css('left', '-400px');
                var slide = $('#sliderList li:last');
                $('#sliderList').children('li:last').remove();
                $('#sliderList').prepend(slide);
                $('#sliderList').animate({ left: "+=400px" }, "slow", "swing");
                clearInterval(myTimer);
                myTimer = setInterval(slide, 2000);

            }
            else {
                $('#sliderList').animate({ left: "+=400" }, "slow", "swing");
                clearInterval(myTimer);
                myTimer = setInterval(slide, 2000);
            }
            blockedSlider = false;
        }
    });

});

---

如果当前动画已经发生，如何阻止这些事件触发？

请在动画函数回调中将blockSlider设置为false

 $('#sliderLeft').click(function () {
        if (blockedSlider == false) {
            blockedSlider = true;
            var left = $('#sliderList').css('left');
            left = left.substring(0, left.length - 2);
            if (left <= -800) {
                $('#sliderList').css('left', '-400px');
                var slide = $('#sliderList li:first');
                $('#sliderList').children('li:first').remove();
                $('#sliderList').append(slide);
                $('#sliderList').animate({ left: "-=400px" }, "slow", "swing",function(){
                    blockedSlider = false
                 });
                clearInterval(myTimer);
                myTimer = setInterval(slide, 2000);
            }
            else {
                $('#sliderList').animate({ left: "-=400" }, "slow", "swing",function(){
                    blockedSlider = false
                 });
                clearInterval(myTimer);
                myTimer = setInterval(slide, 2000);
            }

        }
    });

$（“#滑块左”）。单击（函数（）{
如果（blockedSlider==false）{
blockedSlider=true；
var left=$（'#sliderList'）.css（'left'）；
左=左。子字符串（0，左。长度-2）；
如果（左）如果
blockedSlider
为true，您首先要做的事情是立即
从您的click handler返回
。然后在动画的回调中，将其设置为false，以便后续的单击将再次触发动画。这是有效的！唯一的问题是，在用户手动滚动后，它不会继续滑动d？您正在重用click处理程序中的变量“var slide”。因此，在setInterval函数中，它引用的是局部变量，而不是全局函数
* { margin: 0; padding: 0; }
#sliderWrapper { width: 400px; height: 350px; overflow: hidden; position:relative;}
#sliderList  { list-style: none; left: 0px; position:absolute; width:200000em;}
.sliderItem { float: left; background-color:black; width: 400px; height: 350px;}
.sliderItem.first { background-color:red; }
.sliderItem.second { background-color:blue; }
.sliderItem.third { background-color:yellow; }
.sliderItem.fourth { background-color:green; }
#sliderLeft  { position: absolute; font-size: 63px; top:39%; z-index: 10;}
#sliderRight { position: absolute; font-size: 63px; top:39%; z-index: 10; right: 0px;}
#sliderLeft:hover,
#sliderRight:hover { cursor: pointer; }

 $('#sliderLeft').click(function () {
        if (blockedSlider == false) {
            blockedSlider = true;
            var left = $('#sliderList').css('left');
            left = left.substring(0, left.length - 2);
            if (left <= -800) {
                $('#sliderList').css('left', '-400px');
                var slide = $('#sliderList li:first');
                $('#sliderList').children('li:first').remove();
                $('#sliderList').append(slide);
                $('#sliderList').animate({ left: "-=400px" }, "slow", "swing",function(){
                    blockedSlider = false
                 });
                clearInterval(myTimer);
                myTimer = setInterval(slide, 2000);
            }
            else {
                $('#sliderList').animate({ left: "-=400" }, "slow", "swing",function(){
                    blockedSlider = false
                 });
                clearInterval(myTimer);
                myTimer = setInterval(slide, 2000);
            }

        }
    });