Javascript 如何延迟Java脚本滚轮事件

发布于12月12日

我已经做了一个滑块，我试图用纯JS做一个滚动到幻灯片的功能，但我不确定如何在每一张幻灯片中设置延迟功能滚动(设置用户每次滚动的延迟时间).我不知道在javascrip wheel事件中如何设置延迟函数，我不是在找js scroll函数，有没有可能用wheel事件？

let sTop = document.querySelector(".maze");
sTop.addEventListener('wheel', (e) => {
  e.stopPropagation()
  let delta = e.deltaY
  if(delta == -100){
    leftSl();
  } else if(delta == 100) {
    nextSl();
  }
});

推荐答案

我为你准备了两个答案:

要在滚动到幻灯片功能中实现延迟功能，您可以使用"setTimeout"和变量的组合来跟踪滚动事件是否已我觉得代码应该修改如下

let sTop = document.querySelector(".maze");
let isScrolling = false;



   sTop.addEventListener('wheel', (e) => {
      e.stopPropagation();

  if (!isScrolling) {
    isScrolling = true;

    let delta = e.deltaY;
    if (delta === -100) {
      leftSl();
    } else if (delta === 100) {
      nextSl();
    }

    setTimeout(() => {
      isScrolling = false;
    }, 1000); // Set your desired delay time in milliseconds
      }
     });

    function leftSl() {
       // Your left slide logic here
    }

     function nextSl() {
       // Your next slide logic here
    }

I will write you a more complete model个

下面是带有左导航按钮和下一导航按钮的滑块的一个简单的HTML和CSS代码示例，以及使用纯JavaScript的滚动功能:

HTML :个

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Scrollable Slider</title>
  <style>
     .slider {
      width: 300px;
      overflow: hidden;
      position: relative;
    }

    .slides {
      display: flex;
      transition: transform 0.5s ease-in-out;
    }

    .slide {
      min-width: 100%;
      box-sizing: border-box;
    }

    .controls {
      position: absolute;
      top: 50%;
      width: 100%;
      display: flex;
      justify-content: space-between;
      transform: translateY(-50%);
    }

    .control {
      cursor: pointer;
      padding: 10px;
      background-color: #333;
      color: #fff;
      border: none;
    }

    img {
      width: 100%;
      height: auto;
    }
  </style>
</head>
<body>

<div class="slider">
  <div class="slides">
    <div class="slide"><img src="https://images.unsplash.com/photo-1682685794690-dea7c8847a50?q=80&w=2071&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></div>
    <div class="slide"><img src="https://plus.unsplash.com/premium_photo-1665929001882-2aa45f561d7a?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></div>
    <div class="slide"><img src="https://images.unsplash.com/photo-1682685794690-dea7c8847a50?q=80&w=2071&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></div>
    <!-- Add more slides as needed -->
  </div>
  <div class="controls">
    <button class="control" onclick="leftSl()">Left</button>
    <button class="control" onclick="nextSl()">Next</button>
  </div>
  <div class="controls">
    <button class="control" onclick="leftSl()">Left</button>
    <button class="control" onclick="nextSl()">Next</button>
  </div>
</div>



</body>
</html>

JS :个

<script>
  let currentIndex = 0;
  let isScrolling = false;

  document.querySelector('.slider').addEventListener('wheel', (e) => {
    e.preventDefault();
    
    if (!isScrolling) {
      isScrolling = true;

      const direction = Math.sign(e.deltaY);
      if (direction === -1) {
        leftSl();
      } else if (direction === 1) {
        nextSl();
      }

      setTimeout(() => {
        isScrolling = false;
      }, 1000); // Set your desired delay time in milliseconds
    }
  });

  function leftSl() {
    currentIndex = (currentIndex - 1 + getSlideCount()) % getSlideCount();
    updateSlider();
  }

  function nextSl() {
    currentIndex = (currentIndex + 1) % getSlideCount();
    updateSlider();
  }

  function updateSlider() {
    const slideWidth = document.querySelector('.slide').clientWidth;
    const newTransformValue = -currentIndex * slideWidth;
    document.querySelector('.slides').style.transform = `translateX(${newTransformValue}px)`;
  }

  function getSlideCount() {
    return document.querySelectorAll('.slide').length;
  }
</script>

我希望我能帮上忙.