Ползунок игнорирует, если условно при нажатии на несколько раз

У меня есть ползунок jQuery, который перемещает элементы через контейнер div каждые 5 секунд, анимируя свойство left на 1400px. Как только свойство left достигнет -2800px, если условие начинает перезагружать свойство left, а также удаляет элементы из передней части строки и добавляет их в конец списка, так что скользящий цикл продолжается бесконечно. Этот слайдер также имеет левую и правую кнопки, которые позволят пользователю циклически перемещаться по изображениям, если захотят.

Проблема, с которой я столкнулся, заключается в том, что если вы нажимаете ползунки несколько раз подряд, то свойство left выходит за границы -2800px, заданные в условии if. Я предполагаю, что это связано с тем, что события с несколькими щелчками запускаются до того, как свойство left достигнет -2800px. Как я могу остановить это? Есть ли функция, которая остановит несколько функций от срабатывания до того, как будет завершена первая? Вот jsFiddle (я изменил ширину для сателлитов):

http://jsfiddle.net/25tt5vmp/

Мой jQuery:

$(document).ready(function () {


 var myTimer = setInterval(slide, 5000);

 function slide() {

 var left = $('#sliderList').css('left');
 left = left.substring(0, left.length - 2);
 if (left <= -2800) {


 $('#sliderList').css('left', '-1400px');
 var slide = $('#sliderList li:first');
 $('#sliderList').children('li:first').remove();
 $('#sliderList').append(slide);
 $('#sliderList').animate({ left: "-=1400px" }, "slow", "swing");

 }
 else {
 $('#sliderList').animate({ left: "-=1400" }, "slow", "swing");
 }
 }

 $('#sliderLeft').click(function () {
 var left = $('#sliderList').css('left');
 left = left.substring(0, left.length - 2);
 if (left <= -2800) {


 $('#sliderList').css('left', '-1400px');
 var slide = $('#sliderList li:first');
 $('#sliderList').children('li:first').remove();
 $('#sliderList').append(slide);
 $('#sliderList').animate({ left: "-=1400px" }, "slow", "swing");
 clearInterval(myTimer);
 myTimer = setInterval(slide, 5000);
 }
 else {
 $('#sliderList').animate({ left: "-=1400" }, "slow", "swing");
 clearInterval(myTimer);
 myTimer = setInterval(slide, 5000);
 }
 });

 $('#sliderRight').click(function () {
 var left = $('#sliderList').css('left');
 left = left.substring(0, left.length - 2);
 if (left >= 0) {


 $('#sliderList').css('left', '-1400px');
 var slide = $('#sliderList li:last');
 $('#sliderList').children('li:last').remove();
 $('#sliderList').prepend(slide);
 $('#sliderList').animate({ left: "+=1400px" }, "slow", "swing");
 clearInterval(myTimer);
 myTimer = setInterval(slide, 5000);

 }
 else {
 $('#sliderList').animate({ left: "+=1400" }, "slow", "swing");
 clearInterval(myTimer);
 myTimer = setInterval(slide, 5000);
 }
 });

});
1 ответ

Существует одно простое решение. Используйте переменную-блокировку. Создать переменную:

var blockedSlider = false;

Затем установите значение true при запуске анимации. На каждом клике вы проверяете, является ли заблокированныйSlider истинным или ложным, и только огонь анимации, если false. И после того, как ваша анимация будет выполнена, снова установите для параметра blockedSlider значение false. Это.

licensed under cc by-sa 3.0 with attribution.