React Hooks实现下拉筛选框输入防抖/节流遇阻求助

Hey there! Let's get your debounce and throttle working properly—you're really close, just a few key missteps in how you're wrapping and using those functions. Let's break down the issues and fix them step by step.

What's Going Wrong in Your Current Code #

1. Recreated Functions on Every Render
   Your debounce and throttle functions are defined inside the component, so they get recreated every time the component re-renders. Worse, you never save the wrapped version of your filter function—every time you trigger onKeyUp, you're creating a new debounce/throttle instance, which means the timer never carries over between keystrokes.

2. Unused Wrapped Functions in useEffect
   You call debounce(debounceKeyUp, 2000) in useEffect, but you don't assign the result to anything or use it. That line just creates a debounced function and throws it away immediately.

3. Directly Calling Unwrapped Functions
   Your onKeyUp handler is calling debounceKeyUp or throttleKeyUp, which just run filterOptions directly—no debounce or throttle is actually applied here.

Fixed Code with Explanations #

Here's a revised version of your component that fixes all these issues:

import React, { useState, useCallback } from 'react';
import './dropdownfilter.css';

// Move debounce/throttle outside the component to avoid recreating them on every render
const debounce = (fn, delay) => {
  let timeId;
  return function (...args) {
    if (timeId) clearTimeout(timeId);
    timeId = setTimeout(() => fn(...args), delay);
  };
};

const throttle = (fn, delay) => {
  let lastTriggered = 0;
  return (...args) => {
    const now = Date.now();
    if (now - lastTriggered < delay) return;
    lastTriggered = now;
    return fn(...args);
  };
};

function DropDownFilter() {
  // Separate original options from filtered ones so we can reset easily
  const [originalOptions, setOriginalOptions] = useState(['Mytidbit', 'Deepak', 'Wassup', 'Deeps', 'Maolins', 'Test']);
  const [options, setOptions] = useState(originalOptions);
  const [showDropdown, setShowDropdown] = useState(false);
  const [useDebounce, setUseDebounce] = useState(true);

  // Cache the core filter function with useCallback to keep its reference stable
  const filterOptions = useCallback((inputValue) => {
    const filtered = originalOptions.filter(opt => 
      opt.toLowerCase().includes(inputValue.toLowerCase())
    );
    setOptions(filtered);
  }, [originalOptions]);

  // Create and cache debounced/throttled versions of the filter function
  const debouncedFilter = useCallback(
    debounce(filterOptions, 2000),
    [filterOptions]
  );

  const throttledFilter = useCallback(
    throttle(filterOptions, 2000),
    [filterOptions]
  );

  // Handle keyup by passing the input value to the correct wrapped function
  const handleKeyUp = (e) => {
    const value = e.target.value;
    useDebounce ? debouncedFilter(value) : throttledFilter(value);
  };

  const toggleDropdown = () => setShowDropdown(!showDropdown);
  const toggleFilterType = () => {
    setUseDebounce(!useDebounce);
    setOptions(originalOptions); // Reset to original options when switching types
  };

  return (
    <div className="dropdown">
      <button className="dropbtn" onClick={toggleFilterType}>Change Filter Type</button><br/>
      <button onClick={toggleDropdown} className="dropbtn">
        {useDebounce ? "Debounce" : "Throttle"} <i className="arroww downn"></i>
      </button>
      <div className={`dropdown-content ${showDropdown ? "show" : "hide"}`}>
        <input 
          type="text" 
          placeholder={useDebounce ? "Try Debounce..." : "Try Throttle..."} 
          className="filter-input" 
          onKeyUp={handleKeyUp} 
        />
        <i className="fa fa-fw fa-search" style={{position: 'relative', bottom: '34px', left: '5px'}}></i>
        {options.map((opt, index) => (
          <a key={index}>{opt}</a>
        ))}
      </div>
    </div>
  );
}

export default DropDownFilter;

Key Improvements Explained #

• Debounce/Throttle Outside Component: Moving these utility functions outside ensures they're only created once, not on every render.
• Separate Original/Filtered Options: This lets us reset the dropdown to its original state when switching between debounce and throttle, which improves user experience.
• useCallback for Stable Function References:
  • filterOptions is cached so that the debounce/throttle wrappers don't lose their reference to it.
  • debouncedFilter and throttledFilter are cached too, so the same wrapped function is used every time the event fires—this is critical for maintaining the timer state between keystrokes.
• No More e.persist(): We extract the input value immediately from the event, so we don't need to persist the synthetic event (which gets cleaned up after the callback runs).

Quick Test Tip #

To verify it's working:

• For debounce: Type quickly, and the filter should only update 2 seconds after you stop typing.
• For throttle: Type continuously, and the filter should update at most once every 2 seconds.

内容的提问来源于stack exchange，提问作者dee