如何在性能方面优化脚本

Question

我有一个调用的函数ajaxCall()，它简单地在服务器上进行调用并从提要中返回一个值。我想要做的是将值从提要保存到firstInterval变量，等待 10 秒，再次调用并将值保存到secondInterval变量。然后动画网页上这些数字的增加。这是我们目前所拥有的： setInterval(function(){   getAmounts() }, 11000);function getAmounts(){  firstInterval = ajaxCall();  setTimeout(() => {    secondInterval = ajaxCall();    animateValue('#bronze-price p', firstInterval, secondInterval, 10000)  }, 10000);};  function animateValue(id, start, end, duration) {    start = parseInt(start);    end = parseInt(end);    var range = end - start;    var current = start;    var increment = end > start? 1 : -1;    var stepTime = Math.abs(Math.floor(duration / range));    var obj = document.querySelector(id);    var timer = setInterval(function() {        current += increment;        obj.innerHTML = current;        if (current == end) {            clearInterval(timer);        }    }, stepTime);}所以这个想法是有一个函数来获取第一个间隔，10秒后它会抓住第二个间隔并调用动画。这一切都包含在 setInterval 函数中，因此我可以反复平滑地更改数字。但是我很确定这不是一个非常干净的解决方案，因为它包含setInterval在setTimeout另一个setInterval函数中。我也在控制台中收到了具有这两种功能的此类警告：[违规] 'setInterval' 处理程序花费了 ms跟进这个想法但优化代码的最佳方法是什么？

Answer 1

我认为Promises并使requestAnimationFrame这更容易处理，同时也摆脱setTimeout/setInterval. 一个例子是：

// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random#Getting_a_random_integer_between_two_values_inclusive

function getRandomIntInclusive(min, max) {

    min = Math.ceil(min);

    max = Math.floor(max);

    return Math.floor(Math.random() * (max - min + 1)) + min;

}

// fake api endpoint

const ajaxCall = () => new Promise(resolve => {

    setTimeout(resolve, 400, 1000 + getRandomIntInclusive(0, 1000));

});

// simple animation helper using requestAnimationFrame

const animate = (from, to, duration, cb) => {

    const start = performance.now();

    return new Promise(resolve => {

        requestAnimationFrame(function loop() {

            const f = (performance.now() - start) / duration;

            cb(from + Math.round(f * (to - from)));

            f < 1.0

                ? requestAnimationFrame(loop)

                : resolve();

        });

    });

};

// main

(async (interval) => {

    // where to output

    const dst = document.querySelector('#out');

    // initial value

    let prev  = 0;

    // wait for next value of ajaxCall

    while (true) {

        const next = await ajaxCall();

        console.log(`animating: ${prev} -> ${next}`);

        // animate from `prev` to `next`

        await animate(prev, next, interval, current => {

            dst.innerHTML = current;

        });

        prev = next;

    }

})(10000);

<div id="out"></div>