javascript - 在 ReactJS 中计时函数的执行时间

Question

我需要显示执行一个特别复杂的功能所花费的时间。

看起来很简单，但我无法做到这一点。

我已经实现了一个简单的 Chronometer 组件，它工作正常。

这个想法是在我执行算法之前启动它，然后在它完成时停止它。所以基本上我的组件看起来像这样：

const App = () => {
  const [isRunning, setIsRunning] = React.useState(false)
  // run the chronometer on click and start executing the algorithm
  const runAlgorithm = () => {
    setIsRunning(true)
    someAlgorithmThatWillTakeLong()
    // top once its done
    setIsRunning(false)
  }

 return (
  <div>
    <button onClick={() => runAlgorithm()}>Execute Algorithm and time it</button>
    <Chronometer isRunning={isRunning}/>
  </div>
  )
}

然而，它被忽略了，我不确定如何让这两个东西同时执行。我错过了什么吗？

这是我的代码当前的工作示例：

const Chronometer = ({isRunning}) => {
const [milisseconds, setMilliseconds] = React.useState(0)

    React.useEffect(() => {
        let interval = null
        if (isRunning) {
            interval = setInterval(() => {
                setMilliseconds((ms) => ms + 1)
            }, 1)
        } else {
            clearInterval(interval)
        }

        return () => {
            clearInterval(interval)
        }
    }, [isRunning])

    return (
        <div>
            <h3>Solution time:</h3>
            <h4>{milisseconds/100}</h4>
        </div>
    )
}

const someAlgorithmThatWillTakeLong = () => {
  for (let i=0; i<999999; i++) {
    // just run whatever
  }
  console.warn('done!')
  return
}

const App = () => {
  const [isRunning, setIsRunning] = React.useState(false)
  
  const runAlgorithm = () => {
    setIsRunning(true)
    someAlgorithmThatWillTakeLong()
     setIsRunning(false)
  }
  

  return (
  <div>
    <button onClick={() => runAlgorithm()}>Execute Algorithm and time it</button>
    <button style={{ width: 150 }} onClick={() => setIsRunning(!isRunning)}>{isRunning ? 'Stop' : 'Test chronometer'}</button>
    <Chronometer isRunning={isRunning}/>
  </div>
  )
}

ReactDOM.render(
    <App />,
    document.getElementById('app')
);

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

标签： javascriptreactjs