1

Напишите функцию throttle(f, ms) – «тормозилку», которая возвращает обёртку, передающую вызов f не чаще, чем раз в ms миллисекунд

Визуально это даст следующую картину обработки перемещений мыши:

  1. Первое обновление произойдёт сразу (это важно, посетитель тут же видит реакцию на своё действие).

  2. Дальше может быть много вызовов (микро-передвижений) с разными координатами, но пока не пройдёт 100 мс – ничего не будет.

  3. По истечении 100 мс – опять обновление, с последними координатами. Промежуточные микро-передвижения игнорированы.

  4. В конце концов мышь где-то остановится, обновление по окончании очередной паузы 100 мс сработает с последними координатами.

    function throttle(func, ms) {
    
      var isThrottled = false,
        savedArgs,
        savedThis;
    
      function wrapper() {
    
        if (isThrottled) { // (2)
          savedArgs = arguments;
          savedThis = this;
          return;
        }
    
        func.apply(this, arguments); // (1)
    
        isThrottled = true;
    
        setTimeout(function() {
          isThrottled = false; // (3)
          if (savedArgs) {
            wrapper.apply(savedThis, savedArgs);
            savedArgs = savedThis = null;
          }
        }, ms);
      }
    
      return wrapper;
    }
    

Шаги работы этой функции:

  1. Декоратор throttle возвращает функцию-обёртку wrapper, которая при первом вызове запускает func и переходит в состояние «паузы» (isThrottled = true).

  2. В этом состоянии все новые вызовы запоминаются в замыкании через savedArgs/savedThis. Обратим внимание, что и контекст вызова и аргументы для нас одинаково важны и запоминаются одновременно. Только зная и то и другое, можно воспроизвести вызов правильно.

  3. Далее, когда пройдёт таймаут ms миллисекунд – пауза будет снята, а wrapper – запущен с последними аргументами и контекстом (если во время паузы были вызовы).

Шаг (3) запускает именно не саму функцию, а снова wrapper, так как необходимо не только выполнить func, но и снова поставить выполнение на паузу. Получается последовательность «вызов – пауза… вызов – пауза … вызов – пауза …», каждое выполнение в обязательном порядке сопровождается паузой после него. Это удобно описывается рекурсией.

У меня вопрос по строке savedArgs = savedThis = null. В данном случае контекст и аргументы становятся пустыми, потому что был последний вызов и он сработал с последними аргументами. И что бы вновь поставить func на паузу по сути приравнивают аргументы и контекст к null?

2
  • нет, эту строку можно убрать и ничего не поменяется.
    – Grundy
    Commented 19 сент. 2018 в 7:49
  • 1
    хотя нет, кое-что все-таки поменяется :)
    – Grundy
    Commented 19 сент. 2018 в 8:05

1 ответ 1

2

в setTimeout проверяется следующее условие:

if (savedArgs) {
    wrapper.apply(savedThis, savedArgs);
    savedArgs = savedThis = null;
}

Таким образом идет определение - вызывалась ли функция за время торможения либо нет, и если вызывалась, то вызвать ее с последними аргументами.

После этого идет сбрасывание savedArgs, чтобы на следующем цикле, в случае, если не было вызовов - ничего не вызывать. Если убрать сбрасывание - будет бесконечный цикл с последними аргументами.

Присваивание savedThis - можно убрать, оно ни на что не влияет.

Примеры:

function throttle(func, ms) {

  var isThrottled = false,
    savedArgs,
    savedThis;

  var counter = 0; // только чтобы избежать бесконечного цикла
  function wrapper() {

    if (isThrottled) { // (2)
      savedArgs = arguments;
      savedThis = this;
      return;
    }

    func.apply(this, arguments); // (1)

    isThrottled = true;

    setTimeout(function() {
      isThrottled = false; // (3)
      if (savedArgs && ++counter < 5) {
        wrapper.apply(savedThis, savedArgs);
        //savedArgs = savedThis = null;

      }
    }, ms);
  }

  return wrapper;
}

var t = throttle(function(a) {
  console.log(a)
}, 200);

t(1);
t(2);
t(3);
t(4);


Так же можно было обойтись дополнительным флагом, показывающим были вызовы внутри интервала или нет

function throttle(func, ms) {

  var isThrottled = false,
    savedArgs,
    savedThis,
    calledInThrottle = false;

  function wrapper() {

    if (isThrottled) { // (2)
      savedArgs = arguments;
      savedThis = this;
      calledInThrottle = true;
      return;
    }

    func.apply(this, arguments); // (1)

    isThrottled = true;

    setTimeout(function() {
      isThrottled = false; // (3)
      if (calledInThrottle) {
        calledInThrottle = false;
        wrapper.apply(savedThis, savedArgs);
      }
    }, ms);
  }

  return wrapper;
}

var t = throttle(function(a) {
  console.log(a)
}, 200);

t(1);
t(2);
t(3);
t(4);

3
  • Спасибо вам за стольразвёрнутый ответ,да ещё и с другими интнресными вариациями! И вот ещё маленький такой вопрос:вот эта часть кода: if (isThrottled) { // (2) savedArgs = arguments; savedThis = this; return;как раз и отвечает за игнорирование промежуточных вызовов во время паузы вплоть до последнего когда, пройдёт 100мс? Commented 19 сент. 2018 в 12:13
  • 1
    @ZdraviSmisl, да, isThrottled сбрасывается только в setTimeout, до этого момента он true, следовательно условие всегда выполняется, параметры сохраняются и происходит выход из функции
    – Grundy
    Commented 19 сент. 2018 в 12:57
  • Ясно,спасибо вам большое! Commented 19 сент. 2018 в 13:59

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.