2015-05-09 93 views
3

我正在使用velocity.js進行脈衝動畫。 我有簡單的代碼 在HTML中,我有: XXXXXXXXXXXclearInterval沒有停止函數velocity.js的標註脈衝由setInterval啓動

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

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

blinkNext = setInterval(blinkBtn, 1); 


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

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

+0

任何錯誤?如果可能的話,你可以在小提琴中複製問題嗎? – Zee

+0

在JavaScript中沒有錯誤。 –

回答

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

+0

Thanx很多。這真的很有幫助。現在我把間隔大小增加到了1000毫秒。事情現在開始運作。 –