滑块在多次单击时忽略“如果有条件”

我有一个jQuery滑块，它通过将左侧属性设置1400px的动画，每5秒在容器div中滑动一次项目。一旦left属性达到-2800px，if条件将开始重置left属性，同时从行的前面删除项目并将其附加到列表的后面，这样滑动循环将无限继续。这个滑块还有左右按钮，如果用户愿意，可以循环浏览图像

我遇到的问题是，如果您连续快速多次单击滑块，则左侧属性将超出if条件中设置的-2800px边界。我认为这是因为在左侧属性达到-2800px之前，多次单击事件都会被触发。我该如何阻止这种情况的发生？有没有一个功能可以在第一个功能完成之前阻止多个功能启动？这是一个jsFiddle（我为了显示而更改了宽度）：

http://jsfiddle.net/25tt5vmp/

我的jQuery:

$(document).ready(function () {

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

            $('#sliderList').css('left', '-1400px');
            var slide = $('#sliderList li:first');
            $('#sliderList').children('li:first').remove();
            $('#sliderList').append(slide);
            $('#sliderList').animate({ left: "-=1400px" }, "slow", "swing");
        }
        else {
            $('#sliderList').animate({ left: "-=1400" }, "slow", "swing");
        }
    }
    $('#sliderLeft').click(function () {
        var left = $('#sliderList').css('left');
        left = left.substring(0, left.length - 2);
        if (left <= -2800) {

            $('#sliderList').css('left', '-1400px');
            var slide = $('#sliderList li:first');
            $('#sliderList').children('li:first').remove();
            $('#sliderList').append(slide);
            $('#sliderList').animate({ left: "-=1400px" }, "slow", "swing");
            clearInterval(myTimer);
            myTimer = setInterval(slide, 5000);
        }
        else {
            $('#sliderList').animate({ left: "-=1400" }, "slow", "swing");
            clearInterval(myTimer);
            myTimer = setInterval(slide, 5000);
        }
    });
    $('#sliderRight').click(function () {
        var left = $('#sliderList').css('left');
        left = left.substring(0, left.length - 2);
        if (left >= 0) {

            $('#sliderList').css('left', '-1400px');
            var slide = $('#sliderList li:last');
            $('#sliderList').children('li:last').remove();
            $('#sliderList').prepend(slide);
            $('#sliderList').animate({ left: "+=1400px" }, "slow", "swing");
            clearInterval(myTimer);
            myTimer = setInterval(slide, 5000);
        }
        else {
            $('#sliderList').animate({ left: "+=1400" }, "slow", "swing");
            clearInterval(myTimer);
            myTimer = setInterval(slide, 5000);
        }
    });
});