Удаление классов через функцию с таймаутами

Question

на экране четыре сектора разного цвета и кнопка. Есть массив с последовательностью, в которой секторы нужно поочередно подсвечивать по нажатию на кнопку.

<template>
  <div id="app">
    <div class="section section-1"></div>
    <div class="section section-2"></div>
    <div class="section section-3"></div>
    <div class="section section-4"></div>
</template>

для этого я написал метод, который вызывается при нажатии на кнопку

hightligthSectors() {
      let items = [];
      let counter = 0;
      function show() {
        if (counter < items.length) {
          setTimeout(function() {
            items[counter].classList.add('active');
            setTimeout( () => items[counter].classList.remove('active'), 1000);
            counter++;
            show();
          }, 1000);
        }
      }

      for (let i of this.targetSeq) {
        items.push(document.getElementsByClassName('section-'+i)[0]); 
      }

      show();
    }

При запуске метода нужным секторам добавляется класс, однако при попытке его удалить вылетает ошибка

Uncaught TypeError: Cannot read properties of undefined (reading 'classList')

Которая ссылается на строку удаления класса с таймаутом:

setTimeout( () => items[counter].classList.remove('active'), 1000);

Answer 1

Фреймворки придумали для того, чтобы вы работали с данными и абстракциями, в которые обернуты манипуляции с браузером. Вы не должны вручную добавлять слушатели, классы, выцеплять элементы селекторами и т.д.

<template>
  <div id="app">
    <button @click="startHighlight">Start highlight</button>

    <div
      v-for="id in 4"
      :id="id"
      :class="['section', `section-${id}`, { active: activeSection === id }]"
    ></div>
  </div>
</template>

<script>
export default {
  name: 'App',

  inderval: null,

  data() {
    return {
      activeSection: 0,
    };
  },

  methods: {
    startHighlight() {
      this.$options.interval = setInterval(() => {
        if (this.activeSection === 4) {
          this.activeSection = 1;
          return;
        }
        this.activeSection += 1;
      }, 1000);
    },
  },
};
</script>

<style lang="scss">
.section {
  width: 100%;
  height: 200px;

  &-1 {
    background-color: red;
  }
  &-2 {
    background-color: gray;
  }
  &-3 {
    background-color: blue;
  }
  &-4 {
    background-color: green;
  }

  &.active {
    background: yellow;
  }
}
</style>

БЛОГ НА HUSL

Удаление классов через функцию с таймаутами

Ответы (1 шт):