[SOLVED] How to delay javascript wheel event

How to delay javascript wheel event

I have made a slider, I'm trying to make a scroll-to-slide function with pure JS, But I am not sure how to set a delay function scroll in each slide(set a delay time each time the user scrolls). I don't know how to set the delay function in the javascript wheel event, I'm not looking with js scroll function, have any possibility with wheel event?

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

Solution

I have prepared two answers for you:

To achieve a delay function in your scroll-to-slide functionality, you can use a combination of 'setTimeout' and a variable to track whether the scroll event has been I feel that the code should be modified as follows

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

Below is a simple example of HTML and CSS code for a slider with left and next navigation buttons, and scroll functionality using pure 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>

I hope I have helped.