Как правильно создать декоратор для функции?

Question

[GAS-ART]

Я хочу создать декоратор который будет игнорировать вызовы функции если они выполняются чаще чем раз в секунду.

Использую такой код:

function f(x) {
      alert(x);
   }

   function calls(func, ms) {
      let call = true
      return function (x) {
         console.log("UP: " + call + " " + x)
         if (!call) {
            setTimeout(() => { call = true }, ms);
            return false
         } else {
            console.log("BEFORE: " + call + " " + x)
            call = false;
            console.log("AFTER: " + call + " " + x)
            return func.apply(this, arguments);
         }
      }
   }


   // создаём обёртку
   f = calls(f, 1000);

   f(1);// выполняется
   f(2);// не выполняется
   setTimeout(() => f(3), 100);// не выполняется
   setTimeout(() => f(4), 1100); // выполняется
   setTimeout(() => f(5), 1500); // должен быть проигнорирован (прошло только 400 мс от последнего вызова), но он выполняется!

5тый вызов функции f выполняется (хотя должен быть проигнорирован). Консоль показывает что после 4го вызова переменная call==false и тут же на 5 вызове она меняется на true. И самое странное, если я дебажу код и ставлю брейкпоинт на строке console.log("UP: " + call + " " + x). То переменная call на 5то вызове получает false (как и задумано) и вызов не происходит.

Кто то может мне объяснить что я делаю не так и почему call==false превращается в call==true на 5том вызове?

Вот ссылка на фидл

Answer 1

[Алексей Уколов]

Всё довольно просто - вы не в той ветке логики сбрасываете флаг-блокировщик, вот он и сбрасывается через секунду после третьего вызова (как раз между четвёртым и пятым).
Вот такой вариант работает:

function calls(func, ms) {
  let call = true;
  return function (x) {
     if (call) {
        call = false;

        setTimeout(() => { call = true }, ms);

        return func.apply(this, arguments);
     }
  }
}

Comments

[GAS-ART]

Спасибо за ответ.
Но в таком подходе срабатывает третий вызов:
setTimeout(() => f(3), 100);

[Алексей Уколов]

В теории - не должен. Практикой тоже не подтверждается:

[GAS-ART]

Вы знаете наверное я не учитываю какой то принцип действия функции alert(). Попробовал через console.log() в действительности все работает... А с alert идет вызов f(3). Спасибо за Ваш ответ.

[Алексей Уколов]

А, ну да - alert же ждёт, пока вы его не закроете и поэтому таймауты едут.

Answer 2

[Сергей delphinpro]

https://learn.javascript.ru/task/throttle

Answer 3

[rifat2125]

function Throttle(fn, ms) {
  let timer = null;

  return function throttling(...args) {
    if (timer) return;

    timer = setTimeout(() => {
      fn(...args);
      clearTimeout(timer);
      timer = null;
    }, ms);
  }
}

 f = Throttle(f, 1000);

 f(1);// выполняется
 f(2);// не выполняется