jQuery stopクリックスパム

Question

私は、DIVをスライドさせるために2つのイメージ矢印を作成するためにjQueryを使用しています。クリックスパミングでは、DIVのマージンが完全に乱され、定義された位置に戻ることができなかったことに気付きました。私はまた、第二に、それを使用する場合、それは1つの矢印のために、最初はOK働いていたが、いくつかのクリックがスパムの後に変数is_clickedをテストするので、スライドストップtrueまま

var is_clicked = false; 
    $("#arrow_r").click(function(){ 
     if (is_clicked == true){ 
      return; 
     } 
     is_clicked = true; 
     var $img_block = $('.photoBlock:visible');//current 
     if ($img_block.next().length > 0){ 
      $img_block.animate({ 
        marginLeft:-$('#server_photo_listing').outerWidth() 
       },function(){ 
        is_clicked = true; 
        var $img_block = $('.photoBlock:visible');//current 
        var $img_block_next = $img_block.next();//next 
        $img_block.css("display","none"); 
        $img_block_next.css("display","inherit"); 
        $img_block_next.animate({ 
         marginLeft:0 
        } 
        ); 
        is_clicked = false; 
        }); 
     } 

    }); 

    $("#arrow_l").click(function(){ 
     if (is_clicked == true){ 
      return; 
     } 
     is_clicked = true; 
     var $img_block = $('.photoBlock:visible');//current 
     if ($img_block.prev().length > 0){ 
      $img_block.animate({ 
        marginLeft:$('#server_photo_listing').outerWidth() 
       }, function(){ 
        is_clicked = true; 
        var $img_block = $('.photoBlock:visible');//current 
        var $img_block_prev = $img_block.prev();//previous 
        $img_block.css("display","none"); 
        $img_block_prev.css("display","inherit"); 
        $img_block_prev.animate({ 
         marginLeft:0 
        } 
        ); 
        is_clicked = false; 
        }); 
     } 
    }); 

：私は次のコードになってしまったいくつかの検索。

また、矢印は別のDIVでも使用されていますが、これはdisplay:noneにあります。また、上記のすべてのコードには、メインの内部にあるより多くの関数が含まれています$(function(){}); - それが重要であれば、再び。

アイデア？

Answer 1

この要素のクラックイベントをバインドおよびアンバインドすることができます。

最初の2つの関数を作成します。クリックイベントをバインド解除し、アニメーションが終了したイベントでイベントを再バインドします。

var go_right = function(){ 
    $("#arrow_r").unbind('click'); 
    var $img_block = $('.photoBlock:visible');//current 
    if ($img_block.next().length > 0){ 
     $img_block.animate({ 
      marginLeft:-$('#server_photo_listing').outerWidth() 
     },function(){ 
      var $img_block = $('.photoBlock:visible');//current 
      var $img_block_next = $img_block.next();//next 
      $img_block.css("display","none"); 
      $img_block_next.css("display","inherit"); 
      $img_block_next.animate({ 
       marginLeft:0 
      }, function() { 
       $("#arrow_r").bind('click', go_right); 
      }); 
     }); 
    } 
}; 
var go_left = function(){ 
    $("#arrow_l").unbind('click'); 
    var $img_block = $('.photoBlock:visible');//current 
    if ($img_block.prev().length > 0){ 
     $img_block.animate({ 
     marginLeft:$('#server_photo_listing').outerWidth() 
     }, function(){ 
      var $img_block = $('.photoBlock:visible');//current 
      var $img_block_prev = $img_block.prev();//previous 
      $img_block.css("display","none"); 
      $img_block_prev.css("display","inherit"); 
      $img_block_prev.animate({ 
       marginLeft:0 
      }, function() { 
       $("#arrow_l").bind('click', go_left); 
      }); 
     }); 
    } 
}; 

$("#arrow_r").bind('click', go_right); 
$("#arrow_l").bind('click', go_left); 

私は、単一のハンドラにそれらのハンドラを統合することにより開始する