Как анимировать положение заголовка вкладки браузера при смене вкладки - PullRequest
Новая
       15

Как анимировать положение заголовка вкладки браузера при смене вкладки

0 голосов
/ 24 марта 2020

Я пытаюсь анимировать заголовок вкладки браузера, если эта вкладка неактивна более 1 секунды. Когда я добавляю следующий фрагмент в консоль, он отлично работает. Тем не менее, когда я пытаюсь вызвать это в EventListener для «видимости изменения», он меняет заголовок, но не может оживить. 

  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();

Вот полный код, который я пытаюсь запустить, но не удается сделать это с желаемым поведением анимации: 


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);
  }
});```

1 Ответ

1 голос
/ 24 марта 2020

инициализируйте вашу переменную с let, ваш код не работает, потому что position переменная не обновляется 

      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);
    }
  });
...