Нужно достичь эффекта, что бы при многократном нажатии на кнопку далее или назад, сначала завершалась анимация, потом осуществлялся переход к следующему слайду.
Я кликаю раз 5 на кнопку далее, с первого клика начинается анимация и пока она не завершиться остальные клики не обрабытываются.
ВАЖНО!: Пожалуйста чистый JS, я так понимаю это должна делать функция setTimeout, но не понимаю как.
var slideWidth = 300;
var sliderList = document.querySelector('.slider__list');
var slides = document.querySelectorAll('.slider__item');
var btnPrev = document.querySelector('#prev_slide');
var btnNext = document.querySelector('#next_slide');
var pos = 0;
sliderList.style.width = slides.length * slideWidth + 'px';
btnPrev.onclick = scrollToPrev;
btnNext.onclick = scrollToNext;
function scrollToPrev() {
pos--;
if (pos < 0) {
var children = sliderList.children;
sliderList.style.transition = null;
sliderList.style.left = -(pos + 2) * slideWidth + 'px';
sliderList.insertBefore(children[slides.length - 1], children[0]);
pos++;
}
requestAnimationFrame(function() { //ожидаем следующего запланированного reflow/repain;
requestAnimationFrame(function() {
//предыдущий reflow рассчитал новый dom элемент
//можно делать анимацию.
sliderList.style.transition = 'left 0.6s ease-in-out';
sliderList.style.left = -(slideWidth * pos) + 'px';
})
});
}
function scrollToNext() {
pos++;
if (pos > slides.length - 1) {
sliderList.style.transition = null;
sliderList.style.left = -(pos - 2) * slideWidth + 'px';
var cloneElem = sliderList.children[0].cloneNode(true);
sliderList.appendChild(cloneElem);
sliderList.removeChild(sliderList.children[0]);
pos--;
}
requestAnimationFrame(function() { //ожидаем следующего запланированного reflow/repain;
requestAnimationFrame(function() {
//предыдущий reflow рассчитал новый dom элемент
//можно делать анимацию.
sliderList.style.transition = 'left 0.6s ease-in-out';
sliderList.style.left = -(slideWidth * pos) + 'px';
})
});
}
.slider {
width: 300px;
margin: 50px auto;
}
.slider__container {
position: relative;
width: 300px;
height: 100px;
overflow: hidden;
}
.slider__list {
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
height: 100px;
list-style: none;
}
.slider__item {
float: left;
margin: 0;
padding: 0;
width: 300px;
height: 100px;
box-sizing: border-box;
background-color: #eee;
border: 2px solid black;
border-radius: 5px;
}
.slider__arrows {
width: 300px;
text-align: center;
margin: 15px auto
}
.slider__arrow {
font-size: 16px;
font-weight: bold;
color: black;
margin: 0 10px;
cursor: pointer;
}
Ответ
Одно из простых решений это включать и выключать флаг обозначающий проигрывание анимации. Например
btnPrev.onclick = scrollToPrev;
btnNext.onclick = scrollToNext;
var animationInProgress = false;
function scrollToPrev() {
// не обрабатываем нажатия, если анимация проигрывается
if (animationInProgress) {
return false;
}
/* ... */
// запуск анимации
sliderList.style.transition = 'left 0.6s ease-in-out';
sliderList.style.left = -(slideWidth * pos) + 'px';
// установка флага
animationInProgress = true;
// когда анимация закончится флаг нужно снять
setTimeout(function(){ animationInProgress = false; }, 600);
/* ... */
}
Комментариев нет:
Отправить комментарий