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 - 防止相同的點擊功能一次運行多次

回答

相關問題