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

时间:2013-03-27 01:14:58

标签: jquery

我今天刚刚开始学习JavaScript和jQuery,并且第一个问题让我真正头疼。我一直在寻找解决这个问题的时间,但没有一个解决方案能够奏效。

我的问题是:我创建了一个“旋转木马”网站,如果点击菜单链接,内容会向左或向右滑动。

一切正常,但是如果你在点击功能的动画完成之前再次点击另一个menulink,则内容会滑落并且不在正确的位置。

我尝试过promise()。done(),flags,callback等等,但没有任何对我有用:(也许我做错了..

我正在寻找一个解决方案,阻止这个点击功能,直到它完成,或者更好地建立这个功能的队列,然后一个接一个地运行,但不能同时运行。

这是我的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);
    });

});

你能帮帮我吗?

3 个答案:

答案 0 :(得分:0)

未经测试,但您正在寻找 -

$('#home').click(function(){  
    if( $(this).is(':animated') ) return;
    gotoPage(posHome);
});

$('#news').click(function(){
    if( $(this).is(':animated') ) return;
    gotoPage(posNews);
});

$('#galery').click(function(){     
    if( $(this).is(':animated') ) return;
    gotoPage(posGalery);
});

请参阅此处有关测试animation

的jQuery选择的信息

答案 1 :(得分:0)

BradGreens的答案看起来最正确。

这是一个有趣的替代方案:

您可以使用“currentAnimating”布尔值来判断动画是否仍在执行。 然后在动画完成时,将其设置为false;

var animating = false

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

答案 2 :(得分:0)

你可能会考虑稍微不同的东西 - 即允许点击这三个元素中的任何一个来“劫持”之前不完整点击动作的进度。

$(document).ready(function() {
    var $currentePage = null;

    var gotoPage = function(pos) {
        if($currentePage) {
            $currentePage.stop().animate({'left' : '-1700px'}, speed, 'easeInOutQuint').css('opacity', 0);
        }
        $currentePage = $('li#' + pos).css({
            'opacity' : 1,
            'left' : '1700px'
        }).animate({'left' : '0px'}, speed, 'easeInOutQuint');
    }

    hideAll();
    autoSelect();

    $('#home, #news, #galery').click(function() {
        gotoPage(this.id);
    });
    $('#home').trigger('click');
});

正如您所看到的,gotoPage()大大减少了,其工作原理如下:

  • 杀死当前正在运行的任何动画
  • 将当前元素返回其静止状态
  • 将请求的元素设置为活动状态。