Что такое троттлинг и антивибрация?

Дросселирование:

например, нажмите кнопку, чтобы поле переместилось на 50 пикселей. При первом нажатии кнопки блок начинает двигаться, а затем вы продолжаете нажимать кнопку до того, как блок переместится на 50 пикселей, но блок не переместится более чем на 50 пикселей. После перемещения в положение 50 пикселей вы можете нажать кнопку еще раз, чтобы поле переместилось на следующие 50 пикселей. Резюме: при первой операции начать выполнять. До окончания первого исполнения, как бы вы его ни оперировали, оно будет недействительным. Это похоже на то, когда вы хотите выпить воды, откройте кран диспенсера для воды и получите чашку горячей воды. Просто выключите кран. Когда вы хотите налить стакан воды, откройте кран, чтобы он пустил воду. Он не будет включен все время. Это экономит воду, поэтому это называется дросселированием.

Стабилизатор:

также возьмем отправку кода подтверждения в качестве примера. Нажмите на кнопку без остановок, в результате код подтверждения не отправляется. Когда вы перестаете нажимать, он начинает отправлять капчу. Резюме: операция недействительна все время. С последней операции начинается выполнение. Непрерывная работа много раз, начнется только в последней операции. Для предотвращения дрожания рук, так называемая защита от тряски.

разница:

  • Дросселирование — это первый действительный клик за период времени, остальные клики недействительны.
  • Защита от сотрясения — последний щелчок за определенный период времени действителен, остальные щелчки недействительны.

Мышление:

Throttling idea добавить дроссельную заслонку в рабочую функцию.

  • Перед выполнением функции откройте дроссельную заслонку.
  • В начале функции дроссельная заслонка закрыта.
  • Когда функция завершена, откройте дроссельную заслонку.

Anti shake idea:

  • Сначала я устанавливаю время задержки (таймер), в это время, если вы сработаете пять раз,
  • Я удалю предыдущие четыре операции (очистить функцию запуска таймера), не позволяю выполняться предыдущим четырем операциям.
  • Когда время задержки истекло, вы можете выполнить пятую операцию.

достигать

Реализация защиты от сотрясений

// Anti-shake
      function debounce(fn, wait) {
          var timeout = null;
          return function() {
              if(timeout !== null)   clearTimeout(timeout);
              timeout = setTimeout(fn, wait);
          }
      }
      // Processing function
      function handle() {
          console.log(Math.random());
      }
      // scroll event
      window.addEventListener('scroll', debounce(handle, 1000));

Реализация троттлинга

Код ограничения (отметка времени)

//Throttle code (time stamp)
      var throttle = function(func, delay) {
        var prev = Date.now();
        return function() {
          var context = this;
          var args = arguments;
          var now = Date.now();
          if (now - prev >= delay) {
            func.apply(context, args);
            prev = Date.now();
          }
        }
      }
      //Processing function
      function handle() {
      　　console.log(Math.random());
      }
      //Scroll event
      window.addEventListener('scroll', throttle(handle, 1000));

Код ограничения (таймер):

// Throttle code (timer):
     var throttle = function(func, delay) {
         var timer = null;
         return function() {
             var context = this;
             var args = arguments;
             if (!timer) {
                 timer = setTimeout(function() {
                     func.apply(context, args);
                     timer = null;
                 }, delay);
             }
         }
     }
     //Processing function
     function handle() {
         console.log(Math.random());
     }
     //Scroll event
     window.addEventListener('scroll', throttle(handle, 1000));

view my gists on github https://gist.github.com/satish-rajnale/

<> By Satish Rajnale </>