如何正确清除超时

Question

我有这个功能可以在帖子中添加拍手。我不想每次拍手都拍手，因为这在我的 mysql 服务器上会很疯狂，更不用说 http 请求和重新渲染了。相反，我想让鼓掌加起来一点，只有当用户停止添加鼓掌几秒钟，然后将鼓掌添加到数据库中。所以我的函数将拍手正确地存储在状态中，但它每次都在运行该函数并且从不清除超时。

  let sendClapsToDB

  _clapForPost = (postId) => {

    clearTimeout(sendClapsToDB)

    setClaps(() => claps + 1)

    sendClapsToDB = setTimeout(() => {
      _addClapsToPost(claps, postID)
    }, 5000)
  }

有谁知道如何正确执行此操作。我正在使用 React Native 并获取。每次用户按下按钮时都会调用 _clapForPost 函数。

Answer 1

如果您使用的是类组件，您可以尝试这样的方式。

import React from "react";


class App extends React.Component {
  state = {claps: 0}
  timeout = null;
  sendClap = () => {
    this.setState({claps: this.state.claps + 1})
    if(!this.timeout){
      this.timeout = setTimeout(() => {
        console.log("Send claps", this.state.claps);
        clearTimeout(this.timeout);
        this.timeout = null;
      }, 3000)
    }
  }

  render(){
    console.log(this.state.claps);
    return <button onClick={this.sendClap}>Clap</button>

  }
}

export default App;

我正在清除计时器，因为它运行并在下一次状态更新中重新初始化。 组件卸载时也需要清空定时器。

如果您使用带有钩子的功能组件，您可以尝试类似

import React, {useState, useRef} from "react";


export default () => {
  const [claps, setClaps] =  useState(0);
  const clapsRef = useRef(0);
  clapsRef.current = claps;
  const timeout = useRef(null);
  const sendClap = () => {
    setClaps(claps + 1);
    if(!timeout.current){
      timeout.current = setTimeout(() => {
        console.log("Send claps", clapsRef.current);
        clearTimeout(timeout.current);
        timeout.current = null;
      }, 3000)
    }
  }

    console.log(claps);
    return <button onClick={sendClap}>Clap</button>

}

这里我使用 useState 重新渲染组件，并使用 useRef 捕获最新状态以进行超时以获取最新状态参考。