如何正确清除超时

Question

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

  let sendClapsToDB

  _clapForPost = (postId) => {

    clearTimeout(sendClapsToDB)

    setClaps(() => claps + 1)

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

有谁知道如何正确地做到这一点。我正在使用 React Native 和 fetch。每次用户按下按钮时都会调用 _clapForPost 函数。

Answer 1

如果您使用的是 class 组件，您可以尝试这样的操作。

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 来捕获最新的超时状态以获取最新的状态参考。

如何正确清除超时

How to clearTimeout properly

javascript

react-native

settimeout

cleartimeout