Javascript 对上键作出反应执行设置超时仅一次

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

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>
    );
}

---

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

从“React”导入React，{useRef}； 导出默认函数SearchMovie{ var keyUpTimer=useRefnull；//keyUpTimer将是一个Ref对象 const keyUpTimerDelay=2000； const handleOnKeyUp=事件=>{ ClearTimeoutKeyUpmer.current；//使用'current'访问该值 //“current”属性是可变的，更改它不会导致重新加载 keyUpTimer.current=setTimeout=>{ console.loginput； }，keyUpTimerDelay； }; 回来 setInput.target.value} onKeyUp={handleOnKeyUp} 占位符=键入要搜索的电影。。。 /> ; }

---

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

从“React”导入React，{useRef}； 导出默认函数SearchMovie{ var keyUpTimer=useRefnull；//keyUpTimer将是一个Ref对象 const keyUpTimerDelay=2000； const handleOnKeyUp=事件=>{ ClearTimeoutKeyUpmer.current；//使用'current'访问该值 //“current”属性是可变的，更改它不会导致重新加载 keyUpTimer.current=setTimeout=>{ console.loginput； }，keyUpTimerDelay； }; 回来 setInput.target.value} onKeyUp={handleOnKeyUp} 占位符=键入要搜索的电影。。。 /> ; }

---

这非常有效，我不知道当前或参考资料。然而，我确实尝试过在onKeyDown上再次取消计时器，这似乎很有效，但感觉像是一个黑客。是的，onKeyDown可以工作，以获得下一个按键，但这是一个有点黑客。反应方式是使用计时器的Ref。这里真正的问题是，对函数的每次调用都会使用自己的变量创建一个新的执行上下文。第二次渲染不会看到与第一次渲染相同的KeyUpmer变量，因此当它创建并附加handleOnKeyUp函数时，它实际上是一个新函数，用于查看刚刚创建的新KeyUpmer变量。这非常有效，我不知道当前或引用。然而，我确实尝试过在onKeyDown上再次取消计时器，这似乎很有效，但感觉像是一个黑客。是的，onKeyDown可以工作，以获得下一个按键，但这是一个有点黑客。反应方式是使用计时器的Ref。这里真正的问题是，对函数的每次调用都会使用自己的变量创建一个新的执行上下文。第二个渲染将不会看到与第一个相同的KeyUpmer变量，因此当它创建并附加handleOnKeyUp函数时，它实际上是一个查看刚刚创建的新KeyUpmer变量的新函数。