Блог

Главная - Вопросы по программированию - clearInterval в цикле работает не так, как ожидалось

clearInterval в цикле работает не так, как ожидалось

#javascript #html #for-loop #clearinterval

#javascript #HTML #для цикла #clearinterval

Вопрос:

У меня проблема, когда я удаляю буквы, слово остается

У меня есть два h1, я удаляю слово из каждого h1, и когда все буквы удаляются, я останавливаю интервал для каждого h1 специально для него

img

 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>

Комментарии:

1. Используйте const removeText = вместо этого. В настоящее removeText время создается глобальная переменная, и поэтому каждая итерация перезаписывает предыдущее назначение. Добавление const (или let ) сохраняет его область действия в блоке цикла for

Ответ №1:

Вы очистили единственное setInterval имя removeText (с глобальной областью действия), что делает его для обоих текстов.
Используйте область действия блока, 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>

Комментарии:

1. this в вашем обратном вызове ссылается на объект window / global (а не на идентификатор интервала). Это работает только потому, что интервал никогда не очищается

2. Да, вы должны использовать переменную области видимости блока, как сказал Ник Парсонс, @user16733810

3. Как вы это используете?

4. Попробуйте прочитать эту статью о: const amp; let

Метки: ,