jQuery：防止多次点击？

Question

我试图防止对链接的多次点击，我需要等到函数完成后才能再次单击同一链接。

但是，无论我做什么，总是允许多次单击。

这是我的代码：

var active = false;

$('#rotRight').live('click', function(){
        if (active) {
        return;
    }

    $(this).attr('id', 'rotRight1');
    var curAngle = parseInt($(".selected").getRotateAngle()) || 0;


    if($(".selected").rotate({
        angle: curAngle,
        animateTo: curAngle - 90

    })){
        active = true;
    }
    $(this).attr('id', 'rotRight');
    active = false;
});

我知道我在正确的道路上。 我只需要一个人让我知道我在想什么，或者我做错了什么。

任何帮助，将不胜感激。

谢谢

Answer 1

旋转插件有一个回调 ，您可以在其中重置活动标志值

var active = false;

$('#rotRight').live('click', function() {
  if (active) {
    return;
  }

  var curAngle = parseInt($(".selected").getRotateAngle()) || 0;

  active = true;
  $(".selected").rotate({
    angle: curAngle,
    animateTo: curAngle - 90,
    callback: function() {
      active = false;
    }
  })
});

Answer 2

尝试先防止默认行为，然后再返回

var active = false;

$('#rotRight').live('click', function(e){
    if (active) {
        e.preventDefault(); // prevent default behaviour before returning
        return;
    }

    ... 

});

Answer 3

您始终可以创建覆盖图（加载屏幕），直到通过以下CSS的全屏div停止用户执行任何操作，直到该过程完成为止：

#overlay {
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 999;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: none;
}​

这将执行以下操作： https : //gyazo.com/aa833914eda1c39d3b8198db2b32dc41

在加载屏幕完成之前，使所有内容不可单击。

Answer 4

您可以尝试在链接上使用数据属性 。 这样，您可以在链接本身上设置“活动”属性，然后执行操作。 jQuery使用$（）。data（string）方法处理该系统。 我认为这比使用全局“活动”变量更干净。

$('#rotRight').live('click', function() {
  if ($(this).data("active") != undefined && $(this).data("active") == true) {
    return;
  }

  var curAngle = parseInt($(".selected").getRotateAngle()) || 0;

  $(this).data("active") = true;
  var self = $(this);
  $(".selected").rotate({
    angle: curAngle,
    animateTo: curAngle - 90,
    callback: function() {
      self.data("active") = false;
    }
  })
});

Answer 5

$('#rotRight').live('click', function(e) {
    if (e.handled!=true) {
        e.preventDefault(); // prevent default behaviour before returning
        return;
    }
    e.handled=true;
});