Как синхронизировать transition(css) с событием onclick в javascript?

Question

Валентин @Sviatoy

beginner

Как синхронизировать transition(css) с событием onclick в javascript?

Есть слайдер со стрелками влево и вправо. В css на слайды установлен transition: all ease 1s; При нажатии на стрелки с паузой в 1сек всё работает корректно, но стоит уменьшить интервал нажатий, происходит хаос. В javascript я установил setTimeout 1000 на перемещение слайдов, но получается так, что сначала происходит задержка, а потом перемещение. Как сделать, чтоб сначала происходило перемещение, а потом задержка?
Я совсем новичок в javascript, это моя первая программа, с которой я мучаюсь уже два дня, поэтому не судите строго за такой код (наверняка можно как-то проще, короче написать, но я пока учусь). В коде я на правую стрелку установил setTimeout, на левую - нет, чтоб наглядно было видно что происходит.

<body>
   <div class="container">
      <div class="slider">
         <div class="item1 block">
            <img src="img/photo1.jpg" alt="">
            <div>111</div>
         </div>
         <div class="item2 block">
            <img src="img/photo2.jpg" alt="">
            <div>222</div>
         </div>
         <div class="item3 block">
            <img src="img/photo3.jpg" alt="">
            <div>333</div>
         </div>
         <div class="item4 block">
            <img src="img/photo4.jpg" alt="">
            <div>444</div>
         </div>
      </div>
      <div class="button-left">
         <img src="img/slider-left.jpg" alt="">
      </div>
      <div class="button-right">
         <img src="img/slider-right.jpg" alt="">
      </div>
   </div>

body {
   background-color: #f6f3ec;
}

.container {
   width: 300px;
   height: 300px;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}
.slider {
   display: flex;
   width: 300px;
   height: 300px;
   //overflow: hidden;
   position: relative;
}
.block {
   width: 300px;
   height: 300px;
   position: absolute;
   transition: all ease 1s;
   left: 300px;
}
.item1 {
   position: absolute;
   left: 0;
}
.item4 {
   position: absolute;
   left: -300px;
}

.block img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}
.block div {
   position: relative;
   left: 50%;
   top: -50%;
}
.button-left {
   position: absolute;
   top: 40%;
   left: 0;
   z-index: 99;
}
.button-right {
   position: absolute;
   top: 40%;
   right: 0;
   z-index: 99;
}

"use strict";

let item1 = document.querySelector('.item1');
let item2 = document.querySelector('.item2');
let item3 = document.querySelector('.item3');
let item4 = document.querySelector('.item4');
let items = document.querySelectorAll('.block');
item1.style.left = 0 + 'px';






document.querySelector('.button-right').onclick = right;


function right() {

   if (item1.style.left == 0 + 'px') {
      setTimeout(function () {
         item2.style.left = 0 + 'px';
         item1.style.left = -300 + 'px';
         item4.style.left = 300 + 'px';
         item2.style.zIndex = "5";
         item3.style.zIndex = "1";
         item4.style.zIndex = "1";
         item1.style.zIndex = "2";
      }, 1000);
   }
   else {

      if (item2.style.left == 0 + 'px') {
         setTimeout(function () {
            item2.style.left = -300 + 'px';
            item3.style.left = 0 + 'px';
            item3.style.zIndex = "5";
            item4.style.zIndex = "1";
            item1.style.zIndex = "1";
            item2.style.zIndex = "1";
            item1.style.left = 300 + 'px';
            item4.style.left = 300 + 'px';
         }, 1000);
      }

      else {

         if (item3.style.left == 0 + 'px') {
            setTimeout(function () {
               item3.style.left = -300 + 'px';
               item4.style.left = 0 + 'px';
               item4.style.zIndex = "5";
               item1.style.zIndex = "1";
               item2.style.zIndex = "1";
               item3.style.zIndex = "1";
               item2.style.left = 300 + 'px';
            }, 1000);
         }

         else {
            if (item4.style.left == 0 + 'px') {
               setTimeout(function () {
                  item1.style.left = 0 + 'px';
                  item4.style.left = -300 + 'px';
                  item1.style.zIndex = "5";
                  item2.style.zIndex = "1";
                  item3.style.zIndex = "1";
                  item4.style.zIndex = "1";
                  item2.style.left = 300 + 'px';
                  item3.style.left = 300 + 'px';
               }, 1000);
            }
         }
      }
   }

};

document.querySelector('.button-left').onclick = left;


function left() {

   if (item1.style.left == 0 + 'px') {
      item1.style.left = 300 + 'px';
      item4.style.left = 0 + 'px';
      item3.style.left = -300 + 'px';
      item2.style.zIndex = "2";
      item3.style.zIndex = "1";
      item4.style.zIndex = "5";
      item1.style.zIndex = "2";
   }
   else {
      if (item4.style.left == 0 + 'px') {
         item1.style.left = 300 + 'px';
         item2.style.left = -300 + 'px';
         item3.style.left = 0 + 'px';
         item4.style.left = 300 + 'px';
         item3.style.zIndex = "5";
         item4.style.zIndex = "1";
         item1.style.zIndex = "1";
         item2.style.zIndex = "1";
      }
      else {
         if (item3.style.left == 0 + 'px') {
            item2.style.left = 0 + 'px';
            item3.style.left = 300 + 'px';
            item1.style.left = -300 + 'px';
            item4.style.zIndex = "1";
            item1.style.zIndex = "1";
            item2.style.zIndex = "5";
            item3.style.zIndex = "1";
         }
         else {
            if (item2.style.left == 0 + 'px') {
               item1.style.left = 0 + 'px';
               item2.style.left = 300 + 'px';
               item3.style.left = 300 + 'px';
               item4.style.left = -300 + 'px';
               item1.style.zIndex = "5";
               item2.style.zIndex = "2";
               item3.style.zIndex = "2";
               item4.style.zIndex = "1";
            }
         }
      }
   }
};