Запускает две функции из прослушивателя событий (одна ограничена, другая нет)

Question

Запускает две функции из прослушивателя событий (одна ограничена, другая нет)

1

У меня есть прослушиватель событий для событий прокрутки, который запускает функцию, ответственную за добавление элемента в область просмотра. Тот же самый прослушиватель событий прокрутки дросселируется, чтобы предотвратить ливень событий прокрутки (более управляемый). Библиотека, используемая для дроссельной заслонки, является throttle-debounce. Проблема: дросселирование handlePageScroll все, что содержится в этом методе (конечно).

Код:

componentDidMount() {
  window.addEventListener('scroll', throttle(2000, this.handlePageScroll));
}

handlePageScroll = () => {
  someFn() // logic for appending an element, does not need throttling
  this.loadNextBatch(); // logic that actually needs to be throttled
};

Я пробовал дросселировать изнутри handlePageScroll без успеха. Есть ли способ запустить две функции из прослушивателя событий? Заранее спасибо.

Jose 02 авг. 2017, в 01:15

Источник

Теги:

javascript

addeventlistener

throttle

1 ответ

Ещё вопросы

Sven · Accepted Answer · 2017-08-01T22-09-00.000Z

1

Лучший ответ

Вот решение, поддерживая состояние:

componentDidMount() {
  let throttled = false
  window.addEventListener('scroll', () => {
    if (!throttled) {
      throttle(2000, () => {
        this.loadNextBatch()
        throttled = false
      })()
      throttled = true
    }
    someFn()
  })
}

Sven 01 авг. 2017, в 22:09

0

Это выглядит фантастически, за исключением того, что использование функции стрелки внутри прослушивателя событий приводит к поломке газа. Он запускается множество раз по сравнению с тем, когда он был просто addEventListener('scroll', throttle(2000, this.handlePageScroll))
Jose 01 авг. 2017, в 23:34
0

Ах, да, ты прав, это ошибка с моей стороны. Я отредактирую свой ответ решением через несколько минут.
Sven 01 авг. 2017, в 23:47
0

@ Jose Я обновил с решением теперь. Я не смог проверить это, но, надеюсь, это работает для вас!
Sven 02 авг. 2017, в 00:36
0

без кости Есть что-то непонятное, когда я пытаюсь вызвать throttle то иначе, кроме того, как я это делаю сейчас. Хотя я не понимаю почему. Он должен возвращать удушенную копию любой функции, которую вы передаете в него. Оттуда вы сможете вызывать его как любую другую функцию. const throttled = throttle(2000, this.loadNextBatch); throttled();
Jose 02 авг. 2017, в 19:09
0

Ах так он возвращает функцию, которую вы вызываете? Добавление простой () в конце вызова throttle должно быть достаточно (немедленно вызовите возвращенную функцию), смотрите мой обновленный ответ.
Sven 03 авг. 2017, в 03:11

Показать ещё 3 комментария