如何在选项卡更改时为浏览器选项卡标题的位置设置动画

Question

I'm trying to animate the browser tab's title when that tab has been inactive for more than 1 second. When I add the following snippet to the console, it works perfectly fine. However, when I try to call this inside an eventlistener for "visibilitychange", it does change the title however it fails to animate.

  msg = "Don't forget us" + msg;
  position = 0;
  function scrolltitle() {
    document.title = msg.substring(position, msg.length) + msg.substring(0, position); position++;
    if (position > msg.length);
    position = 0
    window.setTimeout("scrolltitle()",170);
  }
  scrolltitle();

Here is the full code I'm trying to run but failing to do so with the desired behaviour of animation:

const animate = () => {
  msg = ' ';
  msg = "Don't forget us" + msg;
  position = 0;
  function scrolltitle() {
    document.title = msg.substring(position, msg.length) + msg.substring(0, position); position++;
    if (position > msg.length);
    position = 0
    window.setTimeout("scrolltitle()",170);
  }
  scrolltitle();
};

document.addEventListener('visibilitychange', () => {
  if (document.hidden) {
    setTimeout(() => {
      animate();
    }, 1000);
  }
});```

Answer 1

initialize your variable with let , your code doesn't work because position variable is not being updated

      const animate = () => {
    let msg = " ";
    msg = "Don't forget us" + msg;
    let position = 0;
    function scrolltitle() {
      console.log(position, msg.length);
      document.title =
        msg.substring(position, msg.length) + msg.substring(0, position);
      position++;
      if (position > msg.length) position = 0;
      setTimeout(() => {
        scrolltitle();
      }, 170);
    }
    scrolltitle();
  };

  document.addEventListener("visibilitychange", () => {
    if (document.hidden) {
      setTimeout(() => {
        animate();
      }, 1000);
    }
  });