如何在jQuery函数执行's处于活动状态

How to halt jQuery function execution more than once while it's active?

本文关键字：活动状态 jQuery 函数 执行      更新时间：2024-02-24

我正在使用http://jsfiddle.net/CqAU2/用于图像旋转的插件，但如果你点击小提琴中的盒子不止一次，它将继续旋转你点击的次数。我想做的是，只有当盒子不移动时，才考虑click动作。如何做到这一点？

如果动作仍在动画中，您可以设置一个"锁定"动作的标志，并在与动画持续时间相同的时间（在您的情况下为1000ms）后重置锁定的标志：

$(document).ready(function () {
    var degree = 0;
    var locked = false;
    $(".big-ball").click(function () {
        if (!locked) {
            degree += 30;
            $(this).jqrotate(degree, 1000);
            locked = true;
            setTimeout(function(){
                locked = false;
            },1000);
        }
    });
});

我已经更新了你的Fiddle

这是您想要的结果吗？

http://jsfiddle.net/wq6qm/

我在调用动画之前添加了stop（）。

$(elem).stop().animate({...})

stop（）做什么？

当对元素调用.stop（）时，当前正在运行的动画（如有的话）立即停止。

更多关于在此停留的信息：http://api.jquery.com/stop/

我更新你的fiddle-我插入一个控件来防止两次或多次点击

$.fn.jqrotate = function (degrees, speed) {
    if(typeof $.preventTwo !== "undefined" && $.preventTwo == false) return;
    $.preventTwo = false;
    return this.each(function () {
    var elem = this;
    elem.x = $(elem).data('rot')||0;
    $(elem).animate({
        x: degrees
    }, {
      duration : speed,
      step: function( now, fx ) {
        $(fx.elem).css({
              '-webkit-transform' : 'rotate('+now+'deg)',
                 '-moz-transform' : 'rotate('+now+'deg)',
                  '-ms-transform' : 'rotate('+now+'deg)',
                   '-o-transform' : 'rotate('+now+'deg)',
                      'transform' : 'rotate('+now+'deg)'
         }).data('rot', now);
      },
      complete : function(){
          $.preventTwo = true;
      }
    });
});
};
$(document).ready(function () {
    var degree = 0;
    $(".big-ball").click(function () {
        degree += 30;
        $(this).jqrotate(degree, 2000);
    });
});

再见。。。http://jsfiddle.net/CqAU2/1/

相关文章：