jquery - jQuery：如何在第一个事件完成之前停止用户触发相同的事件

Question

我正在为一个朋友制作一个投资组合网站，当我使用 jQuery 为元素制作动画时遇到了一个小问题。

这是我的开发站点http://dotlinesquare.phpfogapp.com/portfolio/gaze控制按钮位于黑色标题处。

问题是如果我在事件发生时单击按钮，它会弄乱位置编号。

这是代码希望它可以帮助您理解我的问题

$('#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

您可以使用.data()绑定 2 click 函数的状态，并在运行操作之前先检查它是否正在进行中。像这样：

  $('#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);
        });
    }

  });