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

我刚开始学习JavaScript和jQuery，并得到了我的第一个问题，这让我很头痛。我一直在寻找几个小时来解决这个问题，但没有任何解决方案能够奏效。jQuery - 防止相同的点击功能一次运行多次

我的问题是：我做了一个“旋转木马”网站，其中内容向左或向右滑动，如果点击菜单链接。

一切工作正常，但如果你点击功能的动画完成之前再次点击另一个menulink，内容滑动，并没有在正确的位置。

我tryed承诺（）（）完成，标志，回调等，但没有为我工作:(也许我之所以这样做是错的..

我在寻找一个解决方案，阻止这个点击功能，直到它完成，或者更好地使这个功能的队列，在另一个，但不是在同一时间运行。，但就像我说的，我今天刚开始学习这些东西，而且我还不熟悉语法等等。

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); 
    }); 

});

你能帮我吗？

来源

2013-03-27 eScoo

没有答案，但你应该知道的关于jQuery的第一件事是链接。 '$（...）'函数很慢;使用'$（'li＃home'）。css（{“opacity”：1}）。css（{“left”：“1700px”}）;'。或者更好的是，'$（'li＃home'）。css（{“opacity”：1，“left”：“1700px”}）;'。后者对“有生命的”呼叫尤其如此。 – Dave 2013-03-27 01:20:46

没有测试，但你要找的这个 -

$('#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); 
});

在这里看到有关测试的jQuery选择为animation

来源

2013-03-27 01:20:33 BradGreens

我还应该提及'.is（）'文档 - http://api.jquery.com/is/ – BradGreens 2013-03-27 01:25:36

BradGreens答案看起来最正确的。

这里是一个有趣的替代：

你可以有一个“currentlyAnimating”布尔说，如果动画仍在进行。然后在动画完成时，将其设置为false;

var animating = false 

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

来源

2013-03-27 01:22:42 Mupps

与我的第一个相同的解决方案，不适用于我，因为我没有将该函数放入动画，但在if语句结束时^ ^这个作品。非常感谢你 – eScoo 2013-03-27 01:33:30

你可能会考虑一些稍微不同的 - 即允许在任何三个元素的点击“劫持”以前不完整的点击操作的进度。

$(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()大大减少工作原理如下：

杀死当前正在运行
返回当前元素到其静止状态
动画的任何动画请求元素处于活动状态。

来源

2013-03-27 02:33:36

不完全是我想要的，但我从中学到了很多东西，非常感谢你:) – eScoo 2013-03-27 12:14:03

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

回答

相关问题