jQuery stop click spamming

Question

Я использую jQuery, чтобы сделать две стрелки изображения для перемещения DIVs. Я заметил, что при рассылке кликов поля DIVs полностью перепутались, и они не смогли вернуться к определенным позициям. С некоторым поиском я закончил с помощью следующего кода:

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

Хотя он работал OK первоначально для одной стрелки, когда я использовал его на второй, после некоторых нажмите спамить проверки переменной is_clicked остается true около того скользящих стоп ,

Я должен также сказать, что стрелки также используются в другом DIV, который находится на display:none - в случае, если это имеет значение. Кроме того, весь приведенный выше код включает в себя больше функций внутри основного $(function(){}); - опять же, если это имеет какое-либо значение.

Любые идеи?

Answer 1

вы можете связать и развязать событие clack этого элемента.

сначала создайте 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); 

Надежда, которая поможет вам