Question

手柄滚动事件将经常触发。减慢/反跳的方法是什么？而且，如果可能的话，我希望上一个事件总是被触发而不被跳过。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<section class="banners mb-4">
      <div class="container">
        <div class="d-flex  flex-column flex-sm-row justify-content-between">
            <div class="banner col m-2"></div>
            <div class="banner col m-2"></div>
            <div class="banner col m-2"></div>
        </div>
      </div>
</section>

这是xnimorz

中的useDebounce挂钩示例

  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)
    }
  }, [])

Answer 1

使用钩子的事件处理程序可以与具有任何反跳实现的任何其他函数相同的方式来反跳。 Lodash：

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

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

请注意，由于React合成事件的工作原理，event对象如果在事件处理程序中使用，则需要进行同步处理。

最后一个事件总是被触发且不会被跳过

预计去抖动功能仅考虑最后一次调用，除非实现允许对此进行更改，例如Lodash debounce中的leading和trailing选项。

Answer 2

const debounceLoadData = useCallback(debounce((debounceValue)=>{

    props.setSenderAddress(debounceValue)
                      
}, 300), []);

如何使用React钩子来减慢/反跳事件处理？

2 个答案: