clearInterval не останавливающая функция, имеющая выноску импульса скорости.js, запущенный setInterval [закрыт]

Я использую скорость.js для анимации пульса. У меня есть простой код В html у меня есть : XXXXXXXXXXX

В javascript:
var blinkNext = 0; / / глобальная переменная

    var blinkBtn = function() {
        $("div").velocity("callout.pulse");
        };

blinkNext = setInterval(blinkBtn, 1);


clearInterval(blinkNext);   // <-- Not working

Ожидаемое поведение: секция div должна пульсировать, а затем останавливаться. Проблема: clearInterval не останавливает выноску пульса. Я много искал, но ничего не нашел

1 3
javascript jquery

1 ответ:

У вас установлен интервал всего в одну миллисекунду, поэтому вы вызываете .velocity() каждую миллисекунду, и я предполагаю, что эти вызовы стоят в очереди. Поэтому, когда вы очистите интервал, потребуется очень много времени, чтобы анимация остановилась.

Вотjsfiddle , который демонстрирует проблему с исходным кодом. Нажмите кнопку " Выполнить >", а затем нажмите кнопку" стоп " так быстро, как вы можете. Вы можете видеть, сколько раз "мигание" записывается в журнал консоли. То есть сколько раз анимация будет работать до того, как она остановится, но в конечном итоге остановится.

Вместо использования setInterval(), Вы можете сделать следующее: 

var blinking = true;

function blink() {
    $('#btnNext').velocity('callout.pulse', function() {
        // This anonymous function is called when the animation completes.
        // If we should be blinking, then we call blink() again.
        if (blinking) {
            blink();
        }
    });
}

// Initially start the animation.
blink();

// This button shows how you can stop and restart the animation.
$('#toggleBtn').click(function() {
    blinking = !blinking;
    if (blinking) {
        blink();
    }
});

Jsfiddle

1