Javascript简单动画在移动设备上滞后

Question

我正在尝试使用“setInterval”来使用打字效果，它工作正常，但在移动设备上滞后。我已经放慢了速度，但它仍然滞后，下面我附上了正在发生的事情的表示，还有我的代码。

代码:

function animate() {
  var a = "We DESIGN,";
  var b = "We DEVELOP";
  var c = "and";
  var d = "We CARE";
  var e = 0;

  var one = setInterval(function () {
    document.getElementById('one').insertAdjacentHTML('beforeend',a[e]);
    e = e + 1;
    if (e == 10) {
      clearInterval(one);
      var f = 0;
      var two = setInterval(function () {
        document.getElementById('two').insertAdjacentHTML('beforeend',b[f]);
        f = f + 1;
        if (f == 10) {
          clearInterval(two);
          var g = 0;
          var three = setInterval(function () {
            document.getElementById('three').insertAdjacentHTML('beforeend',c[g]);
            g = g + 1;
            if (g == 3) {
              clearInterval(three);
              var h = 0;
              var four = setInterval(function () {
                document.getElementById('four').insertAdjacentHTML('beforeend',d[h]);
                h = h + 1;
                if (h == 7) {
                  clearInterval(four);
                }
              },200);
            }
          },150);
        }
      },200);
    }
  },200);
}

起初我使用 jquery 的 .append() 但后来尝试纯 js 看看它是否在做任何事情，但没有运气，我在 body 上调用这个函数 onload()。
无论如何，我并没有真正研究过代码以使其更小，所以除非这不是原因，否则请不要判断它。

桌面: https://drive.google.com/open?id=1Rv4bNu1X0wcHgbehYUb5WqzcVlA2gHTV

手机: https://drive.google.com/open?id=1z8hCT71Xr_X9n3StDGRdn4TpLbx5TeQk

Answer 1

document.getElementById价格昂贵。它遍历 DOM 为字符串中的每个字符一次又一次地找到您的元素。将这些元素存储在变量中更有意义(更好的是，为整个文本 block 使用一个容器)。

我不确定设置和清除间隔是否比一次性 setTimeout 的性能更高或更低。 ，但我认为进行切换没有任何害处，即使只是为了清洁。出于同样的原因，我也使用了 Promise，但是如果将其设为异步有任何问题，您可以轻松地使用回调。

除此之外，代码很难维护。如果您想添加更多文本，厄运金字塔会越来越大，并且通常需要重新编写代码。使用循环。

我会按如下方式处理它:

const text = `We DESIGN,
We DEVELOP
and
We CARE`;
const typeElem = document.querySelector("#typewriter");

(async () => {
  for (const line of text.split("\n")) {
    const div = document.createElement("div");
    typeElem.appendChild(div);

    for (const char of [...line]) {
      div.insertAdjacentHTML("beforeend", char);
      await new Promise(resolve => setTimeout(resolve, 200));
    }
  }
})();

<div id="typewriter"></div>

根据您的规范调整超时(您可以在一行之后暂停，在单独的数据结构中保持每行/字符的暂停等)。