计算百分比差异 live websocket

Question

我已连接到Websocket 流，它为我提供了 +100 的加密货币价格，实时（我大约每 2 秒获得一次新价格）。我想知道，如何计算每个加密货币价格在 5 分钟内的百分比差异，然后每隔一分钟更新一次？我正在使用带有本机 Websocket 连接（不是 socket.io）的 React。

我认为我必须每分钟“保存”（以某种方式）每个加密货币价格，但我该怎么做呢？

出于测试目的，为了查看是否可以每 10 秒更新一次加密货币价格，我尝试在套接字连接的 .onmessage() 中使用 setInterval()。

useEffect(() => {
    console.log('Connection : ', connection);
    if (connection) {
        let interval;
        connection.onmessage = evt => {
            interval = setInterval(() => {
                setPrice(crypto.BTCUSDT.price); // price variable is used to display the price of the crypto
                console.log('----- Interval test -----')
                clearInterval(interval);
            }, 6000);
        };  
    }
}, [connection]);

这不起作用，当在setInterval() 中第一次调用setPrice() 时，就像setInterval() 被忽略并且价格仍然每2 秒更新一次。 console.log() 也是如此，它每 2 秒显示一次，而不是每 10 秒显示一次。

----- 编辑 -----

在crypto 对象中，我有一个固定的时间戳，每分钟递增一次。有人知道我如何使用它来解决这个问题吗？

任何帮助将不胜感激。谢谢

Answer 1

我可能是错的，因为我不知道其余的代码，但如果你的setInterval 不在useEffect 内，那么每次渲染都会创建一个新的间隔。并且每次调用setPrice 时都会重新渲染该组件。将事件侦听器放在useEffect 中，看看是否能解决问题。

所以，我尝试了一些方法，结果如你所愿。至少，我理解你想要的方式。 setPrice 每 10 秒调用一次。

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

export default function App() {
  const [price, setPrice] = useState(0);
  let interval;
  useEffect(() => {
    interval = setInterval(() => {
      setPrice((prev) => prev + 1);
      console.log({ price });
    }, 10000);
    return () => {
      clearInterval(interval);
    };
  }, []);
  return <div>{price}</div>;
}