javascript字符串字符替换

Question

我正在解决 w3resource js 问题之一，如下:

编写一个 JavaScript 程序，通过定期从字符串末尾删除一个字母并将其附加到前面，以正确​​的方向旋转字符串“w3resource”。

我已经通过以下方式解决了这个问题:
HTML:

<div id="target0" style="margin: 50px auto; text-align: center;">w3resource</div>
<div id="target1" style="margin: 50px auto; text-align: center;">w3resource</div>

JS:

var solution = (function(){

  function htmlToArr(targetId) {
    targetId = document.getElementById(targetId);
    let targetContents = targetId.innerHTML;
    let letters = targetContents.split("");

    return letters;
  }

  function arrFirstToLast(arr) {
    first = arr.splice(0, 1);
    arr.splice(arr.length, 0, first[0]);
  }

  function arrLastToFirst(arr) {
    let last = arr.splice(arr.length-1, 1);
    arr.splice(0, 0, last[0]);
  }

  function setHtml(targetId, html) {
    targetId = document.getElementById(targetId);
    targetId.innerHTML = html;
  }

  function rotateString(targetId, direction = "left") {
    letters = htmlToArr(targetId);
    setInterval(function() {
      if (direction === "left") {
        arrFirstToLast(letters);
      } else if (direction === "right") {
        arrLastToFirst(letters);
      }
      let str = letters.join("");
      setHtml(targetId, str)
    }, 1500)
  }

  return {
    rotateString: rotateString
  }
})();

我已经实现了一个选项，可以沿一个方向或另一个方向旋转字符串。 当我有一个目标字符串时，它工作正常:

/*case 0 - one target, works good in both directions*/
solution.rotateString("target0", "right");

当我有两个目标字符串时，它仍然有效，但第二个目标字符串比第一个目标字符串延迟一个字母:

/* case 1 - two targets, same direction, works, non-synced letters */
solution.rotateString("target0");
solution.rotateString("target1");

当我有两个目标字符串并且我想向不同方向旋转它们时，它只会移动第一个目标中的一个字母并停止:

/* case 2 - two targets, different direction, doesen't work */
solution.rotateString("target0", "left");
solution.rotateString("target1", "right");

我可以通过为两个方向实现两个不同的函数来修复我的情况 2。但我想了解，为什么它会失败，以及我在这个 setInterval if-statement 实现中犯了什么错误。

另外，我不知道如何在情况 1 中同步字母移动。

这是笔: https://codepen.io/t411tocreate/pen/zPqVgg?editors=1010

谁能解释一下吗？

Answer 1

您正在使用全局letters变量。

letters = htmlToArr(targetId);

应该是局部变量:

var letters = htmlToArr(targetId);