jQuery的。點擊功能 - 防止它被再次調用，直到函數完成

我已經寫了我正確的jQuery的第一位的圖像幻燈片，它允許用戶通過一些圖片上下滾動：jQuery的。點擊功能 - 防止它被再次調用，直到函數完成

$(window).load(function(){ 

    $('.scrollUp').click(function(){ 
    $('.cardWrapper:visible:first').prevAll(':hidden:first').slideDown(function(){ 
     $('.cardWrapper:visible:last').slideUp(); 
     }); 
    return false; 
    }); 


    $('.scrollDown').click(function(){ 
    if($('.cardWrapper:last').is(':hidden')){ 
    $('.cardWrapper:visible:last').nextAll(':hidden:first').slideDown(); 
    $('.cardWrapper:visible:first').slideUp(); 
    } 

    else{ 
     $('.cardWrapper:last').after('<div class="cardWrapper"></div>');   
      $('.cardWrapper:last').load('/followedTestSingle/?sequence={{gr.sequence_token}}', function(){ 
      $('.cardWrapper:visible:first').slideUp(); 
      }); 
     } 
     return false; 
    }); 
});

我遇到的問題是，如果單擊.scrollDown元素鏈接上的速度非常快 - 它會丟失所有內容，因爲它沒有時間添加額外的內容（我認爲） - 因此它開始失敗。

有沒有辦法讓jQuery不接受對元素的任何新的點擊，直到它運行所有這個函數？

來源

2009-09-04 Tristan Brotherton

這些都很好，有沒有人明白它爲什麼這樣做？（似乎失去了一個元素）？ – 2009-09-04 02:10:05

也許像

var scrollDownClickActive = false; 

$('.scrollDown').click(function(){ 
    if (scrollDownClickActive) return false; 
    scrollDownClickActive = true; 

    if($('.cardWrapper:last').is(':hidden')){ 
     $('.cardWrapper:visible:last').nextAll(':hidden:first').slideDown(); 
     $('.cardWrapper:visible:first').slideUp(200, function(){ scrollDownClickActive = false; }); 
    } 
    else 
    { 
     $('.cardWrapper:last').after('<div class="cardWrapper"></div>');     
     $('.cardWrapper:last').load('/followedTestSingle/?sequence={{gr.sequence_token}}', function(){ 
      $('.cardWrapper:visible:first').slideUp(200, function(){ scrollDownClickActive = false; }); 
     });  
    } 
    return false; 
});

使用標誌來確定是否該功能被激活與否。

來源

2009-09-04 01:53:31 MiffTheFox

不錯。也可以解除點擊，然後在過程完成後重新綁定。 – 2009-09-04 02:03:48

因爲slideUp/slideDown異步發生，所以不起作用。即scrollDownClickActive = false在幻燈片結束之前發生。 – Prestaul 2009-09-04 03:31:21

@Prestaul - 通過使用slideUp回調參數解決了這個問題。 – MiffTheFox 2009-09-04 04:03:30

如果它是單擊一個按鈕元素，只是讓你的函數禁用它，並在完成回調函數中重新啓用它。

否則，只需編寫函數來檢查阻止其運行的變量值。如果該變量未設置，請在處理程序中設置該值（類似var busy = true;），並在完成回調中將其設置回false。

來源

2009-09-04 01:52:58

您可以使用一個標誌，表明它正在滾動（由MiffTheFox的建議），但你必須取消設置標誌幻燈片回調，因爲幻燈片異步發生：

$(function(){ 
    var scrolling = false; 

    function startScrolling() { 
     if(scrolling) return false; 
     return scrolling = true; 
    } 
    function scrollComplete() { 
     scrolling = false; 
    } 

    $('.scrollUp').click(function() { 
     if(startScrolling()) return false; 

     $('.cardWrapper:visible:first') 
      .prevAll(':hidden:first').slideDown(function() { 
       $('.cardWrapper:visible:last').slideUp(scrollComplete); 
      }); 

     return false; 
    }); 

    $('.scrollDown').click(function() { 
     if(startScrolling()) return false; 

     if($('.cardWrapper:last').is(':hidden')) { 
      $('.cardWrapper:visible:last').nextAll(':hidden:first').slideDown(); 
      $('.cardWrapper:visible:first').slideUp(scrollComplete); 
     } else { 
      $('.cardWrapper:last').after('<div class="cardWrapper"></div>'); 
      $('.cardWrapper:last').load('/followedTestSingle/?sequence={{gr.sequence_token}}', function() { 
       $('.cardWrapper:visible:first').slideUp(scrollComplete); 
      }); 
     } 
     return false; 
    }); 
});

免責聲明：我沒有檢查你的代碼，看看它有多有效，我只是爲你添加了標誌和回調。

來源

2009-09-04 03:45:27 Prestaul

使用綁定和解除綁定刪除使用標誌變量=）

function scroller(obj){ 
    $(obj).unbind('click'); 
    if($('.cardWrapper:last').is(':hidden')){ 
      $('.cardWrapper:visible:last').nextAll(':hidden:first').slideDown(); 
      $('.cardWrapper:visible:first').slideUp(); 
      scrollDownClickActive = false; 
    } 
    else 
    { 
      $('.cardWrapper:last').after('<div class="cardWrapper"></div>');     
      $('.cardWrapper:last').load('/followedTestSingle/?sequence={{gr.sequence_token}}', function(){ 
        $('.cardWrapper:visible:first').slideUp(); 
        scrollDownClickActive = false; 
      });  
    } 
    $(obj).click(function(){scroller(this);}); 
} 

$('.scrollDown').click(function(){ 
    scroller(this);   
});

希望這有助於！

來源

2009-09-04 03:52:25 mauris

jQuery的。點擊功能 - 防止它被再次調用，直到函數完成

回答

相關問題