首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在React中再次调用函数时,Lodash _.debounce不会取消现有计时器

。这是因为React的函数组件在重新渲染时会创建新的函数实例,而不是复用之前的函数实例。由于Lodash的debounce函数是基于函数实例的,所以每次重新渲染时都会创建一个新的debounce函数,导致之前的计时器无法被取消。

为了解决这个问题,可以使用React的useCallback钩子函数来缓存函数实例,以便在重新渲染时复用同一个函数实例。同时,可以使用useEffect钩子函数来监听函数依赖的变化,并在变化时取消之前的计时器。

下面是一个示例代码:

代码语言:txt
复制
import React, { useCallback, useEffect } from 'react';
import _ from 'lodash';

const MyComponent = () => {
  const debouncedFunction = useCallback(_.debounce(() => {
    // 在这里编写需要延迟执行的函数逻辑
  }, 500), []);

  useEffect(() => {
    return () => {
      debouncedFunction.cancel(); // 在组件卸载时取消计时器
    };
  }, [debouncedFunction]);

  const handleClick = () => {
    debouncedFunction(); // 调用debouncedFunction函数
  };

  return (
    <button onClick={handleClick}>Click Me</button>
  );
};

export default MyComponent;

在上面的代码中,我们使用了useCallback来缓存debounce函数实例,并将其作为依赖项传递给useEffect。在useEffect中,我们返回一个函数,该函数会在组件卸载时执行,用于取消之前的计时器。在组件渲染时,我们可以直接调用debouncedFunction函数来触发延迟执行的逻辑。

这样,无论组件重新渲染多少次,都会复用同一个debounce函数实例,并且在组件卸载时能够正确地取消计时器。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

没有搜到相关的沙龙

领券