循环中的 clearInterval 不能按预期工作

Question

我有问题 当我删除字母时，单词仍然存在

我有两个 h1，我从每个 h1 中删除单词，当所有字母都被删除时，我专门为每个 h1 停止间隔

let mySelector = document.querySelectorAll(".writ-text");
for (let l = 0; l < mySelector.length; l++) {

  removeText = setInterval(function() {

    // Cut the last letter of the word and print the word after editing
    document.querySelectorAll(".writ-text")[l].textContent =
      document.querySelectorAll(".writ-text")[l].textContent.substr(0,
        document.querySelectorAll(".writ-text")[l].textContent.length - 1);

    // Check if the entire word has been deleted
    if (document.querySelectorAll(".writ-text")[l].textContent.length == 0) {
      clearInterval(removeText)
    }
  }, 1000);
}

<h1 class="writ-text">gold</h1>
<h1 class="writ-text">golder</h1>

Answer 1

您已经清除了唯一一个名为 removeText(global scoped) 的 setInterval，它适用于两个文本。
使用像 let const 这样的块作用域来锻炼

let mySelector = document.querySelectorAll(".writ-text");
for (let l = 0; l < mySelector.length; l++) {

 let removeText = setInterval(function() {

    // Cut the last letter of the word and print the word after editing
    document.querySelectorAll(".writ-text")[l].textContent =
      document.querySelectorAll(".writ-text")[l].textContent.substr(0,
        document.querySelectorAll(".writ-text")[l].textContent.length - 1);

    // Check if the entire word has been deleted
    if (document.querySelectorAll(".writ-text")[l].textContent.length == 0) {
      clearInterval(removeText)
    }
  }, 1000);
}

<h1 class="writ-text">gold</h1>
<h1 class="writ-text">golder</h1>