У меня есть ползунок изображения, использующий 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>
См. документацию для setInterval. Используйте возвращаемое значение этой функции в качестве аргумента clearInterval
.
Не похоже, что вам нужно вызывать clearInterval
, который ничего не делает в этом случае, потому что вы не передаете идентификатор своего интервала (как указывает Питер Вольф в комментариях).
Ваша проблема в том, что вы сбрасываете currentSliderIndex
только если 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>
не следует ли передавать идентификатор интервала для очистки интервала