Блог

Главная - Вопросы по программированию - Vue setInterval / очистить интервал синхронизации

Vue setInterval / очистить интервал синхронизации

#javascript #vue.js #nuxt.js

#javascript #vue.js #nuxt.js

Вопрос:

У меня есть слайдер изображения, использующий Vue.js с функцией setInterval, перебирающей 4 изображения, у меня она работает почти по моему вкусу, за исключением того, что при последнем вызове clearInterval изображения слишком большая задержка, прежде чем ползунок изображения снова запустится с индексом изображения 0. Есть ли способ вернуться непосредственно к первому индексу / изображению более плавно / быстрее?

 <script>
export default {
  name: "Slider",
  data() {
    return {
      currentSliderIndex: 0
    };
  },
  mounted() {
    setInterval(() => {
      this.currentSliderIndex = this.currentSliderIndex   1;

      if (this.currentSliderIndex > 4) {
        clearInterval();
        this.currentSliderIndex = 0;
      }
    }, 4000);
  }
};
</script>

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

1. разве вы не должны передавать идентификатор интервала для очистки интервала

2. См . Документацию для setInterval . Используйте возвращаемое значение этой функции в качестве аргумента clearInterval .

Ответ №1:

Не похоже, что вам нужно вызывать clearInterval , что в данном случае ничего не делает, потому что вы не передаете идентификатор своего интервала (как указывает Питер Вольф в комментариях).

Ваша проблема в том, что вы только сбрасываете currentSliderIndex if currentSliderIndex > 4 . Вам нужно проверить currentSliderIndex > 3 , потому что индекс 4 будет 5-м элементом в вашем массиве изображений. Попробуйте это вместо:

 <script>
export default {
  name: "Slider",
  data() {
    return {
      currentSliderIndex: 0
    };
  },
  mounted() {
    setInterval(() => {
      this.currentSliderIndex = this.currentSliderIndex   1;

      if (this.currentSliderIndex > 3) {
        this.currentSliderIndex = 0;
      }
    }, 4000);
  }
};
</script>