Отказ от дребезга в Javascript

Когда функция вызывается снова и снова, и мы хотим, чтобы эта функция вызывалась через некоторое время, но не регулярно, это достигается путем устранения дребезга. Мы можем добиться устранения дребезга с помощью setTimeOut.
Давайте рассмотрим пример устранения дребезга в Javascript. Мы возьмем в качестве примера панель поиска и хотим, чтобы результат в раскрывающемся списке появлялся через 1 секунду, когда пользователь прекращает печатать, а не после каждой введенной буквы.
Пример из реальной жизни: когда вы печатаете ноутбук, затем останавливаетесь, затем в раскрывающемся списке отображается ноутбук, а не так, как вы показываете L…

Код:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <input type="text" name="searchbar" id="searchbar" onchange="debounceEffect()" placeholder="search bar">
</head>
<body>
   <script>
      var counter = 0
      function giveOptions(){
         console.log("aaya h", counter++);
      }

      function debounce(callback, duration){
         let timer;
         return function(...args){
            // in case user start typing before 1 sec i.e 0.7 sec then clear the timer and start it again
            if(timer) clearTimeout(timer);
            timer = setTimeout(() => {
               callback()
            }, duration);
         }
      }
      const debounceEffect = debounce(giveOptions, 1000)
   </script>
   
</body>
</html>

Отказ от дребезга в Javascript

Похожие вопросы