时间戳

首页 > 解决方案 > 计算百分比差异 live websocket

javascript - 计算百分比差异 live websocket

问题描述

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

我想我必须每分钟“保存”（不知何故）每个加密货币价格，但我该怎么做呢？

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

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]);

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

- - - 编辑 - - -

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

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

标签： javascriptreactjswebsocket

解决方案

我可能错了，因为我不知道其余的代码，但如果你setInterval不在 inside useEffect，那么在每次渲染时都会创建一个新的间隔。并且每次setPrice调用组件都会重新渲染。将事件侦听器放入useEffect并查看是否可以修复它。

所以，我尝试了一些东西，这可以按照你想要的方式工作。至少，我理解你想要的方式。每setPrice10 秒调用一次。

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>;
}

推荐阅读