Javascript 多个 onClick() 函数可以在一次只需要 1 个时同时运行

Question

目前，我的网站上有一些视频链接，当用户单击它们时，相应的视频会显示淡入和淡出动画。如果用户碰巧点击了视频 1，然后在动画完成之前点击了视频 2，那么它会在本应仅显示 1 个视频的情况下显示 2 个视频。现在有人如何阻止 javascript 同时运行多个函数吗？

代码:

$(function(){

var animeReviewsLink = $('#anime-reviews-link');
var animeReviews = $('#anime-reviews');
var animeReviewsText = $('#anime-reviews-text');
var animeCommentsLink = $('#anime-comments-link');
var animeComments = $('#anime-comments');
var animeCommentsText = $('#anime-comments-text');
var animeImagesLink = $('#anime-images-link');
var animeImages = $('#anime-images');
var animeImagesText = $('#anime-images-text');
var animeVideosLink = $('#anime-videos-link');
var animeVideos = $('#anime-videos');
var animeVideosText = $('#anime-videos-text');

var active1 = animeReviewsLink;
var active2 = animeReviews;
var active3 = animeReviewsText;

animeReviewsLink.click(function(e)
{
    active3.hide();
    active1.show();
    animeReviewsLink.hide();
    animeReviewsText.show();
    active2.slideUp(400);
    animeReviews.slideDown(400);
    active1 = animeReviewsLink;
    active2 = animeReviews;
    active3 = animeReviewsText;
    setTimeout(function(){},500);
});

animeCommentsLink.click(function(e)
{
    active3.hide();
    active1.show();
    animeCommentsLink.hide();
    animeCommentsText.show();
    active2.slideUp(400);
    animeComments.slideDown(400);
    active1 = animeCommentsLink;
    active2 = animeComments;
    active3 = animeCommentsText;
    setTimeout(function(){},500);
});

animeImagesLink.click(function(e)
{
    active3.hide();
    active1.show();
    animeImagesLink.hide();
    animeImagesText.show();
    active2.slideUp(400);
    animeImages.slideDown(400);
    active1 = animeImagesLink;
    active2 = animeImages;
    active3 = animeImagesText;
    setTimeout(function(){},500);
});

animeVideosLink.click(function(e)
{
    active3.hide();
    active1.show();
    animeVideosLink.hide();
    animeVideosText.show();
    active2.slideUp(400);
    animeVideos.slideDown(400);
    active1 = animeVideosLink;
    active2 = animeVideos;
    active3 = animeVideosText;
    setTimeout(function(){},500);
});
});

我尝试在每个函数的末尾使用 setTimeout，但似乎并不能阻止它同时运行多个函数。

编辑: fiddle 示例 - http://jsfiddle.net/vcvpu22q/

谢谢。

Answer 1

像这样的事情怎么办？ (已编辑)

$(function(){
var button1 = $('#button1');
var button2 = $('#button2');
var button1text = $('#button1text');
var button2text = $('#button2text');
var button1click = $('#button1click');
var button2click = $('#button2click');    
var canClickButton = true;

button1.click(function(e){
    if(!canClickButton){return;}

    canClickButton = false;
    button2text.hide();
    button2.show();
    button1.hide();
    button1text.show();
    button2click.fadeOut(500,function(){button1click.fadeIn(500)});

    setTimeout(function(){canClickButton = true;}, 1000);

});

button2.click(function(e){
    if(!canClickButton){return;}

    canClickButton = false;
    button1text.hide();
    button1.show();
    button2.hide();
    button2text.show();
    button1click.fadeOut(500, function(){ button2click.fadeIn(500) } );

    setTimeout(function(){canClickButton = true; }, 1000);

});

});