使用 Lodash 的 Debounce 实现 React 表单提交防抖功能

概述

在 React 应用中，防抖（Debounce）技术可以有效地限制函数在短时间内的频繁调用，特别适用于表单提交场景。本文将详细介绍如何利用 Lodash 库中的 debounce 函数，在 React 表单提交中实现防抖功能。

防抖原理

防抖技术的核心思想是：在指定的延迟时间内，如果再次触发事件，则重新开始计时。只有当延迟时间完全结束后，才会执行目标函数。这样可以防止函数因为频繁的触发而导致的不必要的计算或者操作。

实现步骤

引入依赖: 首先，在 React 组件中引入 Lodash 库和所需的 React 钩子。
创建引用变量: 使用 useRef 创建一个引用变量 hasClicked，用于追踪按钮的点击状态。
定义操作函数: 定义一个 doSomething 函数，这里可以放置表单提交的逻辑或其他需要执行的操作。
应用 Debounce: 利用 useCallback 钩子和 Lodash 的 _.debounce 方法，创建一个防抖函数 debouncedFunction。这个函数负责重置 hasClicked 状态。
处理点击事件: 在 handleClick 函数中，通过检查 hasClicked 的状态来决定是否执行操作。如果按钮未被点击过，则执行 doSomething，并通过调用 debouncedFunction 启动防抖计时器。如果按钮已被点击，显示提示信息。
渲染组件: 在组件中渲染一个按钮，并将 handleClick 函数绑定到其点击事件。

完整代码示例

import React, { useCallback, useRef } from 'react';
import _ from 'lodash';
import { message } from 'antd';

const MyComponent = () => {
    const hasClicked = useRef(false);

    const doSomething = () => {
        console.log('执行操作');
        // 这里放置表单提交或其他操作的逻辑
    };

    const debouncedFunction = useCallback(_.debounce(() => {
        hasClicked.current = false;
    }, 1000), []);

    const handleClick = () => {
        if (!hasClicked.current) {
            doSomething();
            hasClicked.current = true;
            debouncedFunction();
        } else {
            message.info('请稍后再试');
        }
    };

    return (
        <button onClick={handleClick}>
            点击我
        </button>
    );
};

export default MyComponent;

English Version

Implementing Debounce in React Form Submissions Using Lodash

Overview

In React applications, debounce is a technique to limit frequent function calls over a short period, particularly useful in form submission scenarios. This article details how to use the debounce function from the Lodash library to implement debounce in React form submissions.

Principle of Debounce

The core idea of debounce is: if the event is triggered again within a specified delay period, the timer resets. The target function is executed only after the delay period has fully elapsed. This prevents unnecessary computations or operations due to frequent triggering of the function.

Implementation Steps

Import Dependencies: First, import the Lodash library and necessary React hooks in your React component.
Create Reference Variable: Use useRef to create a reference variable hasClicked to track the button’s click status.
Define Action Function: Define a doSomething function where you can place the logic for form submission or other actions to be executed.
Apply Debounce: Create a debounced function debouncedFunction using the useCallback hook and Lodash’s _.debounce method. This function is responsible for resetting the hasClicked state.
Handle Click Event: In the handleClick function, decide whether to perform the action based on the state of hasClicked. If the button has not

been clicked, execute doSomething and start the debounce timer by calling debouncedFunction. If the button has already been clicked, display a message.

Render Component: Render a button in the component and bind the handleClick function to its click event.

Complete Code Example

import React, { useCallback, useRef } from 'react';
import _ from 'lodash';
import { message } from 'antd';

const MyComponent = () => {
    const hasClicked = useRef(false);

    const doSomething = () => {
        console.log('Performing action');
        // Place form submission or other action logic here
    };

    const debouncedFunction = useCallback(_.debounce(() => {
        hasClicked.current = false;
    }, 1000), []);

    const handleClick = () => {
        if (!hasClicked.current) {
            doSomething();
            hasClicked.current = true;
            debouncedFunction();
        } else {
            message.info('Please try again later');
        }
    };

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

export default MyComponent;

原文链接：https://juejin.cn/post/7321643424952369167 作者：慕仲卿