jQuery：最初のイベントが終了する前に同じイベントをトリガするユーザーを停止する方法

Question

jQueryを使用して要素をアニメーション化すると、小さな問題を抱えています。

ここに私の開発サイトhttp://dotlinesquare.phpfogapp.com/portfolio/gazeはコントロールボタンが黒いヘッダーにあります。

問題は、イベントが発生しているときにボタンをクリックすると、位置番号が壊れてしまうことです。ここで

コードがうまくいけば、それはあなたがあなたが.data()を使用して、2クリック機能の状態を結合して、それがアクションを実行する前に、最初に進行中だかどうかを確認することができます私の問題

$('#next').click(function() { 
    var currentMargin = $('#slider').attr('style'); 

    var number = currentMargin.match(/-?[0-9]+/); 
    var position = number - 993; 

    $('#slider').animate({ 
     marginLeft: position, 
    }, 1000, 'easeInQuad', function() { 
     console.log('done'); 
    }); 
}); 
$('#back').click(function() { 
    var currentMargin = $('#slider').attr('style'); 

    var number = currentMargin.match(/-?[0-9]+/); 
    var num = new Number(number) 
    var position = num + 993; 
    console.log(position); 
    $('#slider').animate({ 
     marginLeft: position, 
    }, 500, 'easeInQuad', function() { 
     console.log('done'); 
    }); 
}); 

Answer 1

を理解するのに役立ちますです。このように：

$('#next').click(function() { 
    if ($("#slider").data('inprogress') != true) { 

     $("#slider").data('inprogress',true); 

     var currentMargin = $('#slider').attr('style'); 

     var number = currentMargin.match(/-?[0-9]+/); 
     var position = number - 993; 

     $('#slider').animate({ 
      marginLeft: position, 
     }, 1000, 'easeInQuad', function() { 
      console.log('done'); 
      $("#slider").data('inprogress',false); 
     }); 

     } 
    }); 
    $('#back').click(function() { 
    if ($("#slider").data('inprogress') != true) { 

     $("#slider").data('inprogress',true); 


     var currentMargin = $('#slider').attr('style'); 

     var number = currentMargin.match(/-?[0-9]+/); 
     var num = new Number(number) 
     var position = num + 993; 
     console.log(position); 
     $('#slider').animate({ 
      marginLeft: position, 
     }, 500, 'easeInQuad', function() { 
      console.log('done'); 
      $("#slider").data('inprogress',false); 
     }); 
    } 

    });