Q:

Задержка перед повторным отслеживанием события JavaScript

Всем доброго времени суток. Пытаюсь разобраться с задержкой событий
Хочу сделать расстановку классов по блокам прокруткой колеса мыши, но с определенной плавностью.
Дошел до момента задержки перед очередным событием прокрутки, не могу понять, как реализовать. Сейчас классы расставляются мгновенно, хочу задать паузу, чтобы колесико не отслеживалось 1 секунду, потом опять ожидало прокрутки для следующего выставления класса

document.addEventListener('DOMContentLoaded', function() {

  let pages = document.querySelectorAll('.page'),
    delta = 0,
    p = 0;

  function nextElem() {
    pages[p].classList.toggle('my-class');
    p++;
    pages[p].classList.toggle('my-class');
  };

  function prevElem() {
    pages[p].classList.toggle('my-class');
    p--;
    pages[p].classList.toggle('my-class');
  };

  document.body.addEventListener('wheel', function(event) {

    delta = event.deltaY;

    if (delta > 0 && p != pages.length - 1) {
      nextElem();
    };

    if (delta < 0 && p != 0) {
      prevElem();
    };

    console.log(delta, p);
  });
});
body {
  padding: 0;
  margin: 0;
}

.well {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #9c9c9c;
}

.page {
  display: none;
  width: 100%;
  height: 100vh;
  text-align: center;
  line-height: 100vh;
  font-size: 80px;
}

.my-class {
  display: block;
}
<div class="well">
  <div class="page my-class">1</div>
  <div class="page">2</div>
  <div class="page">3</div>
  <div class="page">4</div>
  <div class="page">5</div>
</div>

A:

С помощью setTimeout можно создать таймер.

document.addEventListener('DOMContentLoaded', function() {
    
    let pages = document.querySelectorAll('.page'),
        delta = 0,
        p = 0;
    
    function nextElem() {
        pages[p].classList.toggle('my-class');
        p++;            
        pages[p].classList.toggle('my-class');          
    };  
    
    function prevElem() {
        pages[p].classList.toggle('my-class');
        p--;            
        pages[p].classList.toggle('my-class');          
    };  
    
    //наш таймер
    var timer;
    
    document.body.addEventListener('wheel', function(event) {
    
        //если таймер уже существует то убираем его
        if(timer) {
          window.clearTimeout(timer);
        }
    
        //выполняем прокрутку через 1 секунду
        timer = setTimeout(function() {
          delta = event.deltaY;        

          if ( delta > 0 && p != pages.length-1 ) {
              nextElem();              
          };

          if ( delta < 0 && p != 0) {
              prevElem();             
          };


          console.log(delta, p);
        }, 1000);

    });
    
});
body {
    padding: 0;
    margin: 0;
}
.well {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #9c9c9c;
}

.page {
    display: none;
    width: 100%;
    height: 100vh;
    text-align: center;
    line-height: 100vh;
    font-size: 80px;
}
.my-class {
    display: block;
}
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <div class="well">
        <div class="page my-class">1</div>
        <div class="page">2</div>
        <div class="page">3</div>
        <div class="page">4</div>
        <div class="page">5</div>
    </div>


    <script src="./script.js"></script>

</body>
</html>

