首页 > 解决方案 > 增加和减少值

问题描述

我有个问题。数据数组中的值应按照以下规则每 5 秒增加或减少 0.0001:值应在第一分钟上升,然后在下一分钟下降,依此类推 -

const data = [
    { AUD: "1.5876" }, { BGN: "1.9558" }, { GBP: "0.8527" }, { USD: "1.1820" },
    { UYU: "51.9732" }, { UZS: "12570.5509" }, { VEF: "252746931045.8590" },
    { VND: "27195.9489" }, { VUV: "130.1601" }, { WST: "3.0161" }, { XAG: "0.0449" },
    { XAU: "0.0006" }, { XCD: "3.1944" }, { XDR: "0.8306" },
];

这是我的代码,但我有一个无限循环。

const [currencies, setCurrencies] = useState([]);
let initialTime = true;

useEffect(() => {
    let init = setTimeout(() => {
        initialTime = false;
        console.log('changing the time ' + initialTime);
    }, 5000);
    return () => clearTimeout(init)
}, []);

function increase() {
    data.forEach(e => {
        let value = Number(Object.values(e)[0]);
        const key = Object.keys(e)[0];
        setCurrencies({ [key]: value += 0.0001 });
    })
    console.log(currencies);
}

let interval = setInterval(() => {
    if (initialTime) {
        increase()
    } else {
        return () => clearInterval(interval);
    }
}, 1000);

标签: javascriptreactjs

解决方案


因此,跟踪时间并确定它已经持续了多长时间以及何时达到时间长度,翻转它。

let updateTime = Date.now();
const endTime = updateTime + 20000;

let dir = 1;
let value = 1.2357;
const flipTime = 5000;

const timer = setInterval(function () {
  if(Date.now() - updateTime >= flipTime) {
    updateTime = Date.now();
    dir *= -1;
  }
  value += dir * .0001;
  console.log(value.toFixed(4));
  
  // If over end time, stop looping
  if (Date.now() >= endTime) {
    window.clearTimeout(timer);
  }
}, 1000);

旁注,setInterval 不是 100% 准确的,因此随着时间的推移,您会看到数字浮动。


推荐阅读