对按键做出反应仅执行一次 setTimeout

Question

当用户完成输入、计时器基本完成时，我需要运行一些东西。当用户键入时计时器将被重置，但一旦时间结束，它将根据用户键入的次数运行该函数

export default function SearchMovie() {
    var keyUpTimer = 0;
    const keyUpTimerDelay = 2000;


    const handleOnKeyUp = (event) => {
        clearTimeout(keyUpTimer);
        keyUpTimer = setTimeout(() => {
    
            console.log(input);
        }, keyUpTimerDelay);
    };


    return (
        <div className="search-container">
            <input
                type="text"
                className="input-text"
                onInput={(e) => setInput(e.target.value)}
                onKeyUp={handleOnKeyUp}
                placeholder="Type a movie to search..."
            />
        </div>
    );
}

Answer 1

因为 React 会在每次渲染时调用您的函数，每次组件渲染时，都会创建一个keyUpTimer值为 的新变量0，因此您永远不会真正清除旧计时器。为了为每个渲染维护相同的计时器变量，您应该使用Ref。

import React, {useRef} from 'react';

export default function SearchMovie() {
    var keyUpTimer = useRef(null); // keyUpTimer will be a Ref object
    const keyUpTimerDelay = 2000;


    const handleOnKeyUp = (event) => {
        clearTimeout(keyUpTimer.current); // use `current` to access the value
        // the `current` property is mutable and changing it will not cause a rerender
        keyUpTimer.current = setTimeout(() => {
    
            console.log(input);
        }, keyUpTimerDelay);
    };


    return (
        <div className="search-container">
            <input
                type="text"
                className="input-text"
                onInput={(e) => setInput(e.target.value)}
                onKeyUp={handleOnKeyUp}
                placeholder="Type a movie to search..."
            />
        </div>
    );
}