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循环？

1 个答案: