How to queue up?

Description of the slider: the slider changes 5 photos when clicked, and writes 5 photos to the buffer, so that on the next click it replaces the previous 5 photos

Problem: if you start to quickly click the slider as I understand it does not have time to copy to the clipboard and shows the same pictures

Question: how can this be fixed? I need that if you quickly click, then the replacement of photos was put in a queue and executed sequentially, but when you press back, the whole queue was reset and made 1 replacement of photos back.

Code:

$("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(); } 

Thank you in advance!