setTimeout не работает внутри EventListener

Question

Я пытаюсь закодировать слайдер, который должен исчезнуть на изображении, если я нажму на кнопку.

function showelementOnclick(selectorToID, firstShowingElenment, milliseconds) {
  var childElements = $(selectorToID).children();
  var a = childElements.find("button");


  for (var i = 0; i < a.length; i += 2) {
    a.eq(i).click(function() {
      childElements.eq(firstShowingElenment).css("display", "none");
      firstShowingElenment--;

      console.log("first : " + firstShowingElenment)

      if (firstShowingElenment == -1) {
        firstShowingElenment = 2;
      }
      childElements.eq(firstShowingElenment).fadeIn(1000)
      console.log("Bin ich hier?")

      setTimeout(function() {
        console.log("hi")
      }, 5000)

    })
  }

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="slider">
  <div class="slide first">
    <img src="Bilder/Download.jpg" alt="" />-->
    <button>Rückwärts 1</button>
    <button>Vorwärts 1</button>
  </div>

  <div class="slide second">
    <img src="Bilder/image.jpg" alt="" />-->
    <button>Rückwärts 2</button>
    <button>Vorwärts 2</button>
  </div>

  <div class="slide third">
    <img src="Bilder/Download.jpg" alt="" />-->
    <button>Rückwärts 3</button>
    <button>Vorwärts 3</button>
  </div>
</div>

Это мой код, функционирование с постепенным исчезновением работает, но setTimeout не работает должным образом. Моя цель состоит в том, чтобы, если пользователь нажимает на кнопку, которая должна отобразить изображение, и если он хочет щелкнуть дважды, он должен ждать 5 секунд. Извините за мой плохой английский sh.

Answer 1

Это должно работать на IE без использования полифилов:

const sliderEl = document.querySelector('#slider');
const TIMEOUT_DURATION = 5000;

sliderEl.addEventListener('click', function(event) {
  if (event.target.tagName === 'BUTTON') {
    event.target.disabled = true;

    setTimeout(function() {
        event.target.disabled = false;
    }, TIMEOUT_DURATION);
  }
});

<div id="slider">
  <div class="slide first">
    <img src="Bilder/Download.jpg" alt="" />-->
    <button>Rückwärts 1</button>
    <button>Vorwärts 1</button>
  </div>

  <div class="slide second">
    <img src="Bilder/image.jpg" alt="" />-->
    <button>Rückwärts 2</button>
    <button>Vorwärts 2</button>
  </div>

  <div class="slide third">
    <img src="Bilder/Download.jpg" alt="" />-->
    <button>Rückwärts 3</button>
    <button>Vorwärts 3</button>
  </div>
</div>

Answer 2

Я заменил JavaScript, предоставленный вами, альтернативным решением, которое, я думаю, должно работать для описанной вами функциональности.

Вы можете обернуть setTimeout в конструктор Promise и await - это завершение. Просто отключите кнопку перед вызовом setTimeout и включите ее снова, как только истечет время ожидания.

Использование делегирования события - это более простой способ управления событиями, чем зацикливание на каждом элементе button. Основная идея c состоит в том, чтобы поместить один прослушиватель событий в родительский элемент в иерархии DOM, а затем проверить аргумент event, передаваемый обработчику при возникновении события. Это обеспечивает чистоту кода тем, что имеет уникальную настройку обработчика для каждого button на странице. Ниже приведен пример:

const sliderEl = document.querySelector('#slider');
const TIMEOUT_DURATION = 5000;

sliderEl.addEventListener('click', async event => {
  if (event.target.tagName === 'BUTTON') {
    event.target.disabled = true;

    await new Promise((resolve, reject) => {
      setTimeout(resolve, TIMEOUT_DURATION);
    });

    event.target.disabled = false;
  }
});

<div id="slider">
  <div class="slide first">
    <img src="Bilder/Download.jpg" alt="" />-->
    <button>Rückwärts 1</button>
    <button>Vorwärts 1</button>
  </div>

  <div class="slide second">
    <img src="Bilder/image.jpg" alt="" />-->
    <button>Rückwärts 2</button>
    <button>Vorwärts 2</button>
  </div>

  <div class="slide third">
    <img src="Bilder/Download.jpg" alt="" />-->
    <button>Rückwärts 3</button>
    <button>Vorwärts 3</button>
  </div>
</div>

Если это не то, чего вы пытаетесь достичь, я могу перечитать вопрос и изменить свой ответ.