Как замедлить / отменить обработку событий с помощью ловушек реагирования? - PullRequest
Новая
       20

Как замедлить / отменить обработку событий с помощью ловушек реагирования?

0 голосов
/ 06 января 2019

Событие Handle Scroll будет запускаться часто. Как это можно замедлить / отменить? И если это возможно, я хочу, чтобы последнее событие всегда было запущено, а не пропущено. 

  const handleScroll = event => {
    //how to debounse scroll change?
    //if you will just setValue here, it's will lag as hell on scroll
  }


  useEffect(() => {
    window.addEventListener('scroll', handleScroll)

    return () => {
      window.removeEventListener('scroll', handleScroll)
    }
  }, [])

Вот пример использования ловушки для отрыва от xnimorz 

import { useState, useEffect } from 'react'

export const useDebounce = (value, delay) => {
  const [debouncedValue, setDebouncedValue] = useState(value)

  useEffect(
    () => {
      const handler = setTimeout(() => {
        setDebouncedValue(value)
      }, delay)

      return () => {
        clearTimeout(handler)
      }
    },
    [value, delay]
  )

  return debouncedValue
}

1 Ответ

0 голосов
/ 06 января 2019

Обработчик событий, использующий перехватчики, может быть обработан так же, как и любая другая функция с любой реализацией debounce, например, Lodash: 

  const updateValue = _.debounce(val => {
    setState(val);
  }, 100);

  const handleScroll = event => {
    // process event object if needed
    updateValue(...);
  }

Обратите внимание, что из-за того, как работают синтетические события React, event объект должен обрабатываться синхронно, если он используется в обработчике событий.

последнее событие всегда будет запущено и не пропущено

Ожидается, что только деблокированная функция будет учтена только последним вызовом, если только реализация не позволяет изменить это, например, leading и trailing опции в Lodash debounce.

...