setTimeout在事件监听器中不起作用

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秒钟。对不起，我的英语不好。

Answer 1

我用另一种解决方案替换了您提供的JavaScript，我认为该解决方案应能满足您描述的功能。

您可以将setTimeout包装在Promise构造函数中，然后await完成。只需在调用setTimeout之前禁用该按钮，然后在超时后重新启用它即可。

使用事件侦听器委托比循环遍历每个按钮元素是一种处理事件管理的简便方法。下面是一个示例：

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>

如果这不是您要实现的目标，我可以重新阅读问题并修改答案。