jQueryの.click機能 - 機能は

Question

を完了するまで、私は、ユーザーが一部の画像を上下にスクロールし、することを可能にする画像のスライドショーのための適切なの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は、このすべての機能が実行されるまで、要素の新しいクリックを受け入れないようにする方法はありますか？

Answer 1

たぶん機能がアクティブであるかどうかを決定するためのフラグを使用し

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

のようなもの。

Answer 2

ボタン要素をクリックしている場合は、機能を無効にして完了コールバック関数で再度有効にしてください。

それ以外の場合は、関数が実行されないようにする変数値をチェックするように記述してください。変数が設定されていない場合は、ハンドラに値（var busy = true;など）を設定し、完了コールバックでfalseに戻します。

Answer 3

あなたは（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; 
    }); 
}); 

免責事項：私はコードが有効かどうかを確認するためにコードをチェックしていません。フラグとコールバックを追加しました。

Answer 4

結合および非結合の使用は、フラグ変数の使用を取り除く=）

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

は、この情報がお役に立てば幸い！