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次点击功能的状态，并在运行操作之前先检查它是否正在进行中。像这样：

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

  });

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

1 个答案: