jQuery - 防止相同的点击功能一次运行多次

Question

我今天刚开始学习 JavaScript 和 jQuery，遇到了第一个问题，这让我非常头疼。我一直在寻找几个小时来解决这个问题，但没有一个解决方案有效。

我的问题是:我制作了一个“轮播”网站，如果单击菜单链接，内容会向左或向右滑动。

一切正常，但如果您在单击功能的动画完成之前再次单击另一个菜单链接，内容会滑走并且不在正确的位置。

我尝试过promise().done()、标志、回调等等，但没有任何效果对我:(也许我做错了..

我正在寻找一种解决方案，阻止此点击函数直到其完成，或者更好地将此函数放入队列，以便在另一个函数之后运行，但不是同时运行。

这是我的JS代码，我知道它并不完美，可以更好地解决，但就像我说的，我今天才开始学习这些东西，我还不熟悉语法等。

    var gotoPage = function(pos) {

    if(pos == 'home') {
        $('li#home').css({"opacity" : 1});
        $('li#home').css({"left" : "1700px"});
        $('li#home').animate({"left" : "0px"}, speed, 'easeInOutQuint');

        $('li#news').animate({"left" : "-1700px"}, speed, 'easeInOutQuint');
        $('li#news').animate({"opacity" : 0}, 0);
        $('li#galery').animate({"left" : "-1700px"}, speed, 'easeInOutQuint');
        $('li#galery').animate({"opacity" : 0}, 0);
    } else if (pos == 'news') {
        $('li#news').css({"opacity" : 1});
        $('li#news').css({"left" : "1700px"});
        $('li#news').animate({"left" : "0px"}, speed, 'easeInOutQuint');

        $('li#home').animate({"left" : "-1700px"}, speed, 'easeInOutQuint');
        $('li#home').animate({"opacity" : 0}, 0);
        $('li#galery').animate({"left" : "-1700px"}, speed, 'easeInOutQuint');
        $('li#galery').animate({"opacity" : 0}, 0);
    } else if (pos == 'galery') {
        $('li#galery').css({"opacity" : 1});
        $('li#galery').css({"left" : "1700px"});
        $('li#galery').animate({"left" : "0px"}, speed, 'easeInOutQuint');

        $('li#news').animate({"left" : "-1700px"}, speed, 'easeInOutQuint');
        $('li#news').animate({"opacity" : 0}, 0);
        $('li#home').animate({"left" : "-1700px"}, speed, 'easeInOutQuint');
        $('li#home').animate({"opacity" : 0}, 0);
    }

}

$(document).ready(function(){

    hideAll();
    autoSelect();

    $('#home').click(function(){        
        gotoPage(posHome);
    });

    $('#news').click(function(){
        gotoPage(posNews);
    });

    $('#galery').click(function(){      
        gotoPage(posGalery);
    });

});

你能帮我吗？

Answer 1

布拉德格林的答案看起来是最正确的。

这里有一个有趣的选择:

您可以使用“currentlyAnimating” bool 值来判断动画是否仍在执行。然后在动画完成时，将其设置为 false；

var animating = false

if(pos == 'home' && !animating) {
    animating = true;
    $('li#galery').animate({"opacity" : 0}, 100,  function() {
        // Animation complete.
        animating = false;
    }););
}