Как поставить в очередь?

238
09 марта 2017, 23:01

Описание работы слайдера: слайдер меняет по 5 фотографий при клике, и записывает 5 фотографий в буфер, чтобы при следующем клике заменяет предыдущие 5 фоток

Проблема: если начинаешь быстро кликать то слайдер как я понимаю не успевает копировать в буфер и показывает одни и те же фотки

Вопрос: как можно это пофиксить? Мне нужно чтобы если быстро кликаешь то замена фоток ставилась в очередь и выполнялась последовательно, но при нажатие назад вся эта очередь сбрасывалась и выполнил 1 замену фоток назад.

Код:

$("div.left_switcher").click(function(){
    setTurnedByUserFlag();
    turnRight();
});
$("div.right_switcher").click(function(){
    setTurnedByUserFlag()
    turnLeft();
});
var ItemBuffer = {
    imagesrc : "",
    name: "",
    role: "",
    imagesrc1 : "",
    name1: "",
    role1: "",
    imagesrc2 : "",
    name2: "",
    role2: "",
    imagesrc3 : "",
    name3: "",
    role3: "",
    imagesrc4 : "",
    name4: "",
    role4: ""
};
function turnLeft(){  
    var $speaker_items = $("div.speaker__item");
    var numOfItems = $speaker_items.length;
    var firstItem = $speaker_items[0];
    var firstItem1 = $speaker_items[1];
    var firstItem2 = $speaker_items[2];
    var firstItem3 = $speaker_items[3];
    var firstItem4 = $speaker_items[4];
    for(var i = 1; i < numOfItems; i++){
        var currentItem = $speaker_items[i+4];
        var prevItem = $speaker_items[i-1];    
        setPropertiesToCard(currentItem, prevItem, "Left");
    }
    copyPropertiesToBuffer(firstItem, firstItem1, firstItem2, firstItem3, firstItem4, ItemBuffer);   
    setPropertiesFromBuffer($speaker_items[numOfItems-1], $speaker_items[numOfItems-2], $speaker_items[numOfItems-3], $speaker_items[numOfItems-4], $speaker_items[numOfItems-5], ItemBuffer, "Left");
}
function setPropertiesToCard(itemFrom, itemTo, dest){
    //Начать анимацию исчезания надписи и фотографии
    animateItemOut($("div.speaker__image", itemTo), dest);
    animateTextOut($("div.speaker__desc", itemTo));
    //По исчезновению фото и надписи изменить их CSS-свойства
    //setTimeout(function(){
        $(".speaker__image", itemTo).css({"background-image": $(".speaker__image", itemFrom).css("background-image")});
        $(".speaker__name", itemTo).html($(".speaker__name", itemFrom).html());
        $(".speaker__role", itemTo).html($(".speaker__role", itemFrom).html());        
    //}, ANIMATION_DELAY);
    //Запустить анимацию появления фото и подписи
    setTimeout(function(){
        animateItemIn($("div.speaker__image", itemTo), dest);
        animateTextIn($("div.speaker__desc", itemTo));
    }, ANIMATION_DELAY);
function setPropertiesFromBuffer(itemTo, itemTo1, itemTo2, itemTo3, itemTo4, buffer, dest){

    //Начать анимацию исчезания надписи и фотографии
    animateItemOut($("div.speaker__image", itemTo), dest);
    animateTextOut($("div.speaker__desc", itemTo));
     animateItemOut($("div.speaker__image", itemTo1), dest);
    animateTextOut($("div.speaker__desc", itemTo1));
     animateItemOut($("div.speaker__image", itemTo2), dest);
    animateTextOut($("div.speaker__desc", itemTo2));
     animateItemOut($("div.speaker__image", itemTo3), dest);
    animateTextOut($("div.speaker__desc", itemTo3));
     animateItemOut($("div.speaker__image", itemTo4), dest);
    animateTextOut($("div.speaker__desc", itemTo4));
    //По исчезновению фото и надписи изменить их CSS-свойства
    //setTimeout(function(){
        $(".speaker__image", itemTo).css({"background-image" : buffer.imagesrc});
        $(".speaker__name", itemTo).html(buffer.name);
        $(".speaker__role", itemTo).html(buffer.role);
        $(".speaker__image", itemTo1).css({"background-image" : buffer.imagesrc1});
        $(".speaker__name", itemTo1).html(buffer.name1);
        $(".speaker__role", itemTo1).html(buffer.role1);
        $(".speaker__image", itemTo2).css({"background-image" : buffer.imagesrc2});
        $(".speaker__name", itemTo2).html(buffer.name2);
        $(".speaker__role", itemTo2).html(buffer.role2);
        $(".speaker__image", itemTo3).css({"background-image" : buffer.imagesrc3});
        $(".speaker__name", itemTo3).html(buffer.name3);
        $(".speaker__role", itemTo3).html(buffer.role3);
        $(".speaker__image", itemTo4).css({"background-image" : buffer.imagesrc4});
        $(".speaker__name", itemTo4).html(buffer.name4);
        $(".speaker__role", itemTo4).html(buffer.role4);
    //}, ANIMATION_DELAY);
    //Запустить анимацию появления фото и подписи
    setTimeout(function(){
        animateItemIn($("div.speaker__image", itemTo), dest);
        animateTextIn($("div.speaker__desc", itemTo));
         animateItemIn($("div.speaker__image", itemTo1), dest);
        animateTextIn($("div.speaker__desc", itemTo1));
         animateItemIn($("div.speaker__image", itemTo2), dest);
        animateTextIn($("div.speaker__desc", itemTo2));
         animateItemIn($("div.speaker__image", itemTo3), dest);
        animateTextIn($("div.speaker__desc", itemTo3));
         animateItemIn($("div.speaker__image", itemTo4), dest);
        animateTextIn($("div.speaker__desc", itemTo4));
    }, ANIMATION_DELAY);
}
function copyPropertiesToBuffer(itemToCopy, itemToCopy1, itemToCopy2, itemToCopy3, itemToCopy4, buffer){

    buffer.imagesrc = $(".speaker__image", itemToCopy).css("background-image");
    buffer.name = $(".speaker__name", itemToCopy).html();
    buffer.role = $(".speaker__role", itemToCopy).html();  
    buffer.imagesrc1 = $(".speaker__image", itemToCopy1).css("background-image");
    buffer.name1 = $(".speaker__name", itemToCopy1).html();
    buffer.role1 = $(".speaker__role", itemToCopy1).html();  
    buffer.imagesrc2 = $(".speaker__image", itemToCopy2).css("background-image");
    buffer.name2 = $(".speaker__name", itemToCopy2).html();
    buffer.role2 = $(".speaker__role", itemToCopy2).html();  
    buffer.imagesrc3 = $(".speaker__image", itemToCopy3).css("background-image");
    buffer.name3 = $(".speaker__name", itemToCopy3).html();
    buffer.role3 = $(".speaker__role", itemToCopy3).html();  
    buffer.imagesrc4 = $(".speaker__image", itemToCopy4).css("background-image");
    buffer.name4 = $(".speaker__name", itemToCopy4).html();
    buffer.role4 = $(".speaker__role", itemToCopy4).html();  
}

Заранее благодарю!

READ ALSO
Что такое Critical rendering path? [требует правки]

Что такое Critical rendering path? [требует правки]

Объясните, пожалуйста, значение термина Critical rendering path

261
flexbox баги, поддержка браузеров и устройств

flexbox баги, поддержка браузеров и устройств

Привет всем! Я недавно столкнулся с проблемой flexbox на iosКак я понял в итоге не работают некоторые свойства в некорых ситуациях, словом есть...

312
Неверное время в MySQLзапросе

Неверное время в MySQLзапросе

У меня есть БД с данными о резервировании жильяКаждая запись имеет дату заявки (поле reservated)

248
GROUP_CONCAT в JOIN

GROUP_CONCAT в JOIN

Есть таблица categories и таблица category_type со связьюМне надо выбрать из таблицы categories категории и для каждой выбрать связи из category_type

228