Question

问题陈述： 作为开发者，我想开发一种打字动画效果，只要页面还活着，就应该在页面上运行，而不会对页面造成任何性能问题（内存泄漏）。

我现在面临的问题是我的代码导致了我想避免的内存泄漏。

这是我迄今为止开发的。

let loopAnimation = true;
let animationTimeout;
let animationBase = 'Develop in ';
let animationPool = ['HTML', 'CSS', 'JavaScript'];
let animationCounter = 0;
let animation = animationBase + animationPool[animationCounter];
let i = 1;

let timeoutReadable = 1750;
let timeoutTyping = 100;
let timeoutDeleting = 70;

let span = document.getElementById('animationtextbox');
let forwarding = false;
let currentWord;

function sleep(ms) {
  return new Promise((resolve) => {
    animationTimeout = setTimeout(() => {
      resolve();
      return null;
    }, ms);
  });
}

textAnimation();

async function textAnimation() {
  while (loopAnimation) {
    currentWord = null;
    currentWord = animationPool[animationCounter];
    if (forwarding) {
      if (i < currentWord.length) {
        // play effect (type word)
        span.innerText =
          animationBase + currentWord.slice(0, i - currentWord.length);
        i++;
        forwarding = true;
        await sleep(timeoutTyping);
      } else {
        span.innerText = animationBase + currentWord;
        i = 1;
        forwarding = false;
        await sleep(timeoutReadable);
      }
    } else {
      if (i <= currentWord.length) {
        // play effect (remove word)
        span.innerText =
          animationBase + animationPool[animationCounter].slice(0, i * -1);
        i++;
        forwarding = false;
        await sleep(timeoutDeleting);
      } else {
        // switch animation word
        i = 1;
        if (animationCounter < animationPool.length - 1) {
          animationCounter++;
        } else {
          animationCounter = 0;
        }
        forwarding = true;
        await sleep(timeoutTyping);
      }
    }
  }
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <span id="animationtextbox"></span>
  </body>
</html>

Answer 1

您没有清除超时

添加

await clearTimeout()

每次创建超时后

用

替换你的函数

async function textAnimation() {
  while (loopAnimation) {
    currentWord = null;
    currentWord = animationPool[animationCounter];
    if (forwarding) {
      if (i < currentWord.length) {
        // play effect (type word)
        span.innerText =
          animationBase + currentWord.slice(0, i - currentWord.length);
        i++;
        forwarding = true;
        await sleep(timeoutTyping);
        await clearTimeout(animationTimeout )
      } else {
        span.innerText = animationBase + currentWord;
        i = 1;
        forwarding = false;
        await sleep(timeoutReadable);
        await clearTimeout(animationTimeout)
      }
    } else {
      if (i <= currentWord.length) {
        // play effect (remove word)
        span.innerText =
          animationBase + animationPool[animationCounter].slice(0, i * -1);
        i++;
        forwarding = false;
        await sleep(timeoutDeleting);
        await clearTimeout(animationTimeout);
      } else {
        // switch animation word
        i = 1;
        if (animationCounter < animationPool.length - 1) {
          animationCounter++;
        } else {
          animationCounter = 0;
        }
        forwarding = true;
        await sleep(timeoutTyping);
        await clearTimeout(animationTimeout);
      }
    }
  }
}

JavaScript [内存泄漏]：使用 javascript 的动画会导致内存泄漏

1 个答案: