Как остановить выполнение функции jQuery более одного раза, пока она активна?

Question

Как остановить выполнение функции jQuery более одного раза, пока она активна?

0

Я использую этот http://jsfiddle.net/CqAU2/ плагин для вращения изображения, но если вы нажмете на квадрат в скрипке несколько раз, он будет продолжать вращаться столько раз, сколько вы на него нажимали. То, что я хотел бы сделать, это принять действие click во внимание только тогда, когда поле не перемещается. Как это можно сделать?

Xeen 04 дек. 2013, в 13:59

Источник

Теги:

javascript

jquery

html

css

image

3 ответа

0

Это результат, который вы хотели?

http://jsfiddle.net/wq6qm/

Я добавил stop() перед вызовом анимации.

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

Что делает stop()?

Когда.stop() вызывается в элементе, текущая анимация (если она есть) немедленно останавливается.

Подробнее о остановке здесь: http://api.jquery.com/stop/

Stefan Moraru 04 дек. 2013, в 11:06

0

Спасибо, но это не совсем то, что мне нужно. Я хочу, чтобы анимация завершилась, и как только это будет сделано, пользователь может щелкнуть по ней еще раз, а затем она снова начнет анимацию.
Xeen 04 дек. 2013, в 12:54

0

я обновляю ваш скрипт - я вставляю элемент управления для предотвращения двух или более щелчков

$.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);
    });
});

byee... http://jsfiddle.net/CqAU2/1/

Frogmouth 04 дек. 2013, в 10:59

Ещё вопросы

Спасибо, но это не совсем то, что мне нужно. Я хочу, чтобы анимация завершилась, и как только это будет сделано, пользователь может щелкнуть по ней еще раз, а затем она снова начнет анимацию.

c_kick · Accepted Answer · 2013-12-04T11-30-00.000Z

Вы можете установить флаг, который "блокирует" действие, если он все еще оживляет, и сбрасывает заблокированный флаг после того же времени, что и продолжительность анимации (в вашем случае 1000 мс):

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

Я обновил вашу скрипку