Как сделать функцию, которая прыгает между двумя значениями на тике?

Question

• 1000 .

if (this.descriptionRef.current) {
        const { scrollHeight } = this.descriptionRef.current

        setTimeout(function run() {
          this.setState({ y: scrollHeight })
          console.log(scrollHeight)
          setTimeout(run, 7000)
        }, 7000)
      }

Итак, у меня есть эта вложенная функция setTimeout, которая должна выполнять тикающую часть, но мне нужно как-то изменить значение setState.

Answer 1

Вы можете использовать функцию генератора.

function* switchValues (value) {
  while(true){
    yield 0;
    yield value;
   }
}

const valueSwitcher = switchValues({ y: 10 })
console.log(valueSwitcher.next().value) //0
console.log(valueSwitcher.next().value) //the value you passed in, in this case an object 

Она подберет выполнение функции там, где вы ее оставили в последний раз (после yield).

Вы можете попробовать использовать это в ваш код выглядит так:

if (this.descriptionRef.current) {
        const { scrollHeight } = this.descriptionRef.current

        setTimeout(function run() {
          this.setState(valueSwitcher.next().value)
          console.log(scrollHeight)
          setTimeout(run, 7000)
        }, 7000)
      }

Answer 2

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";

function App() {
  const [number, setNumber] = useState(0);

  useEffect(() => {
    if (number === 10) {
      setTimeout(() => {
        setNumber(90)
      }, 1000);
    } else {
      setTimeout(() => {
        setNumber(10)
      }, 1000);
    }
  }, [number]);

  return (
    <div>
      <h1>{number}</h1>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 3

Можете ли вы использовать setInterval?

let x = 0
setInterval(() => x = x === 0 ? "something else" : 0, 7000)