如何覆盖requestAnimationFrame循环

How to override a requestAnimationFrame loop?

本文关键字：requestAnimationFrame 循环 覆盖 何覆盖      更新时间：2023-09-26

我正在页面上创建一个小ticker，以编程方式向用户显示指令。我已经很好地工作了：

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?');

一次发一条消息效果很好，但当两条消息同时出现时，时间越长的一条就会胜出。我需要哪一个在第二秒取消或覆盖任何仍在运行的程序。

不知道如何干净地完成。

任何帮助都会动摇！

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>

相关文章：
  • 没有找到相关文章