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-statment实现中的错误是什么。

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

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

任何人都可以解释一下吗？

Answer 1

您正在使用全局letters变量。

letters = htmlToArr(targetId);

应该是一个局部变量：

var letters = htmlToArr(targetId);

javascript字符串字符替换

1 个答案: