Как правильно очистить время - PullRequest
Новая
       42

Как правильно очистить время

1 голос
/ 22 сентября 2019

У меня есть эта функция, которая добавляет хлопки к сообщению.Я не хочу добавлять хлоп с каждым хлопком, потому что это было бы безумием на моем сервере MySQL, не говоря уже о http запросах и повторных рендерах.Вместо этого я хочу, чтобы хлопки немного суммировались, и только если пользователь прекратил добавлять хлопки на несколько секунд, затем добавьте хлопки в базу данных.Таким образом, моя функция правильно хранит хлопки в состоянии, но она каждый раз запускает функцию и никогда не очищает тайм-аут. 

  let sendClapsToDB

  _clapForPost = (postId) => {

    clearTimeout(sendClapsToDB)

    setClaps(() => claps + 1)

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

Кто-нибудь знает, как это сделать правильно.Я использую React Native и выбираю.Функция _clapForPost вызывается каждый раз, когда пользователь нажимает кнопку.

1 Ответ

2 голосов
/ 22 сентября 2019

Если вы используете компонент класса, вы можете попробовать что-то вроде этого. 

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 для захвата последнего состояния для тайм-аута для получения последней ссылки на состояние.

...