React中延迟onMouseOver事件触发的实现方法

The issue you're facing is that rapid mouse movements over list elements trigger setState multiple times in quick succession. To fix this, you can use debouncing—a technique that delays executing a function until after a specified period of inactivity (0.5 seconds in your case). This way, only the last hover event will trigger the state update once the delay has passed.

Here are two implementations depending on whether you're using a class component or functional component:

1. Class Component Implementation #

Since your example uses a class component (this.setState), here's how to add debouncing:

Step 1: Track the timeout ID #

First, initialize a variable to hold the timeout ID in your component's constructor:

constructor(props) {
  super(props);
  this.state = { data: null };
  this.timeoutId = null; // Store timeout ID to clear later
}

Step 2: Create a debounced state update method #

Add a method that handles the delayed state update, clearing any existing timeout before setting a new one:

debouncedUpdateState = (newData) => {
  // Clear any pending timeout to cancel previous state update attempts
  if (this.timeoutId) {
    clearTimeout(this.timeoutId);
  }
  
  // Set a new timeout to update state after 500ms
  this.timeoutId = setTimeout(() => {
    this.setState({ data: newData });
  }, 500);
};

Step 3: Update your event handlers #

Modify onMouseOver to call the debounced method, and add onMouseOut to clear the timeout if the user leaves the element before the delay:

<ListElement 
  onMouseOver={() => this.debouncedUpdateState(yourData)} 
  onMouseOut={() => clearTimeout(this.timeoutId)}
>
  Data
</ListElement>

Step 4: Clean up the timeout on unmount #

Prevent memory leaks by clearing the timeout when the component unmounts:

componentWillUnmount() {
  if (this.timeoutId) {
    clearTimeout(this.timeoutId);
  }
}

2. Functional Component Implementation (with Hooks) #

If you're using functional components, you can achieve the same with useRef to track the timeout ID and useEffect for cleanup:

import { useState, useRef, useEffect } from 'react';

function YourComponent() {
  const [data, setData] = useState(null);
  const timeoutIdRef = useRef(null);

  const debouncedUpdateState = (newData) => {
    if (timeoutIdRef.current) {
      clearTimeout(timeoutIdRef.current);
    }
    timeoutIdRef.current = setTimeout(() => {
      setData(newData);
    }, 500);
  };

  // Clean up timeout on unmount
  useEffect(() => {
    return () => {
      if (timeoutIdRef.current) {
        clearTimeout(timeoutIdRef.current);
      }
    };
  }, []);

  return (
    <ListElement 
      onMouseOver={() => debouncedUpdateState(yourData)} 
      onMouseOut={() => clearTimeout(timeoutIdRef.current)}
    >
      Data
    </ListElement>
  );
}

Alternative: Use Lodash's debounce (if available) #

If you already use Lodash in your project, you can simplify this by using its built-in debounce function:

Class Component: #

import _ from 'lodash';

constructor(props) {
  super(props);
  this.state = { data: null };
  // Create a debounced version of setState
  this.debouncedSetState = _.debounce((newData) => {
    this.setState({ data: newData });
  }, 500);
}

// Don't forget to cancel the debounce on unmount
componentWillUnmount() {
  this.debouncedSetState.cancel();
}

Then use it in your handler:

<ListElement onMouseOver={() => this.debouncedSetState(yourData)}>Data</ListElement>

Functional Component: #

import { useState, useCallback } from 'react';
import _ from 'lodash';

function YourComponent() {
  const [data, setData] = useState(null);
  
  // Use useCallback to memoize the debounced function
  const debouncedSetState = useCallback(
    _.debounce((newData) => setData(newData), 500),
    []
  );

  return (
    <ListElement onMouseOver={() => debouncedSetState(yourData)}>Data</ListElement>
  );
}

Key notes:

• The onMouseOut handler is optional but recommended—it cancels the pending state update if the user moves the mouse away from the element before the delay ends.
• Always clean up timeouts when the component unmounts to avoid memory leaks and unexpected state updates.

内容的提问来源于stack exchange，提问作者Pierre Olivier Tran