当用户开始输入和停止输入时调用一次函数[重复]答案

【问题标题】：Calling function once when user starts typing and stops typing [duplicate]当用户开始输入和停止输入时调用一次函数[重复]
【发布时间】：2021-11-15 16:39:42
【问题描述】：

我在 React 中有一个输入字段，在这个输入字段中用户正在输入一条消息。我希望，当用户开始输入时，只调用一次函数。我尝试了一个解决方案，但它一次又一次地调用该函数。

 export default function App() {
      let typingTimer; //timer identifier
      let doneTypingInterval = 5000; 
      let myInput = document.getElementById("input-text");
    
      //on keyup, start the countdown
      if (myInput) {
        myInput.addEventListener("keyup", () => {
          clearTimeout(typingTimer);
          if (myInput.value) {
            typingTimer = setTimeout(doneTyping, doneTypingInterval);
          }
        });
      }
    
      //user is "finished typing," do something
      function doneTyping() {
        console.log("done");
      }
    
      return (
        <div className="App">
          <h1>Hello CodeSandbox</h1>
          
          <form>
            <input type="search" id="input-text" placeholder="Start typing...." />
          </form>
        </div>
      );
    }

上面的代码在 5 秒后调用了doneTyping，但调用了 5 次。我只想调用一次，当用户停止输入时也是如此。

【问题讨论】：

我认为这是一个关闭问题，因为您正在处理事件侦听器的回调 make typingTimer var from let 并尝试它是否解决了您的问题
OP 正在寻找一种称为debounce 的技术。有它的库，例如debounce implementation of lodash
Peter Seliger : 你能更新一下我的情况下如何使用它的答案
@Mudasir ...对不起，我想出了一个工作示例代码，下划线的去抖动与您的反应示例代码混合为可执行的 sn-p 但问题同时已关闭，因此我无法再粘贴答案。
@DrewReese ... 我投票支持再次打开此 Q，因为这里提供的方法和链接为可能答案的方法都没有满足 OP 的要求 ... " 我只想在[用户开始输入时]调用一次，并且在用户停止输入时[第二次]调用一次”。

标签： javascript reactjs

【解决方案1】：

我很确定这是一个关闭问题。此代码示例适用于重置计时器。

HTML：

 <input type="button" id="test">

JS：

let timer;
document.getElementById('test').addEventListener('click', () => {
  clearTimeout(timer);
  timer = setTimeout(callback, 1000);
})

function callback() {
  console.log('called');
}

【讨论】：

【解决方案2】：

你想使用Debounce之类的东西。

这是一个基于 Codesandbox 代码的工作示例。

注意：请检查控制台。

import React, { useRef } from "react";

const DEBOUNCE_THRESHOLD = 500;

export default function App() {
  const timeoutHandler = useRef(null);

  const handleChange = (event) => {
    if (timeoutHandler.current) {
      clearTimeout(timeoutHandler.current);
    }
    timeoutHandler.current = setTimeout(() => {
      console.log(event.target.value);
    }, DEBOUNCE_THRESHOLD);
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>

      <form>
        <input
          type="search"
          onChange={handleChange}
          id="input-text"
          placeholder="Start typing...."
        />
      </form>
    </div>
  );
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

【讨论】：