Как переопределить цикл requestAnimationFrame?

Question

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

var ticker = document.getElementById('ticker'); 

function instruct (message) { 
    var message = message; 
    var letters = message.split(''); 
    var part = ''; 

    function animate() { 
    if (letters.length !== 0) { 
     ticker.textContent = ''; 
     part += letters.shift(); 
     ticker.textContent = part; 
     return requestAnimationFrame(animate); 
    } 
    } 
    animate(); 
} 

Это мило, это похоже, что это очень быстро набирать сообщение к пользователю.

Так вот пара образцов сообщений:

instruct('Great, thanks!'); 
instruct('What\'s next?'); 

Одно сообщение в то время работает нормально, но когда два приходят сразу, тем дольше один выигрывает. Мне нужно, чтобы когда-либо приходилось второму, чтобы отменить или переопределить все, что все еще работает.

Не знаете, как это сделать чисто.

Любая помощь будет качать!

Answer 1

cancelAnimationFrame - так же, как clearInterval

var ticker = document.getElementById('ticker'); 
 
var animFrame; 
 
function instruct (message) { 
 
    var message = message; 
 
    var letters = message.split(''); 
 
    var part = ''; 
 
    
 
    cancelAnimationFrame(animFrame); 
 

 
    function animate() { 
 
    if (letters.length !== 0) { 
 
     ticker.textContent = ''; 
 
     part += letters.shift(); 
 
     ticker.textContent = part; 
 
     return requestAnimationFrame(animate); 
 
    } 
 
    } 
 
    animFrame = animate(); 
 
} 
 

 

 
setTimeout(function() { instruct('this is a testing message'); },500); 
 
setTimeout(function() { instruct('this is a second testing message'); },600);

<div id="ticker"></div>