如何覆盖 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>

如何覆盖 requestAnimationFrame 循环？

How to override a requestAnimationFrame loop?

javascript

animation

requestanimationframe