clearInterval沒有停止函數velocity.js的標註脈衝由setInterval啓動

Question

我正在使用velocity.js進行脈衝動畫。 我有簡單的代碼 在HTML中，我有： XXXXXXXXXXX

在javascript中：
VAR blinkNext = 0; //全局變量

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

blinkNext = setInterval(blinkBtn, 1); 


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

預期行爲：div部分應該脈衝然後停止。 問題：clearInterval不停止脈衝標註。 我搜索了很多，但找不到任何東西

Answer 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