About doing regular digital timing scrolling effects

At present the project team is doing a receive the Numbers to make it realize digital scroll effect On the basis of the polling do is a number so far on the latest digital change I think of is using setTimeout timer, please read the epilogue puts forward his own opinion, is not perfect in front of the train of thought, can be used in the end

/** * Timer method * @param num {number} current value * @param digitalBeating {number} upper value * @param diff {number} num - TransNum (num,digitalBeating,diff) {transNum(num,digitalBeating,diff) {let i = digitalBeating,timeout = null;
    const animate = () => {
       if (i<num) {
        i++
        timeout = setTimeout(animate,1000/diff)
       } else {
           digitalBeating = num
       }
       let numList = i.toString().split(' '} animate()}Copy the code

So is it easy to do it here and there’s a way to go, for example, have you considered performance

transNum(num,digitalBeating,diff) {
    let i = digitalBeating,timeout = null;
    const animate = () => {
       if (timeout) {
           clearTimeout(timeout)
           timeout = null
       }
       if (i<num) {
        i++
        timeout = setTimeout(animate,1000/diff)
       } else {
           digitalBeating = num
       }
       let numList = i.toString().split(' '} animate()}Copy the code

In the last step, we added anti-shake, which is called recursively. While the last setTimeout still exists, we need to remove setTimeout so as not to cause interference and lag. Is that ok? It should be controlled between 20ms and 30ms, so we will carry out the next step of transformation

transNum(num,digitalBeating,diff) {
    let i = digitalBeating,timeout = null,steps = 1;
    const animate = () => {
       if (timeout) {
           clearTimeout(timeout)
           timeout = null
       }
       if (i<num) {
        if(diff<=50) {
            steps = 1
        } else if (diff=<100&&diff>50) {
            steps = 2
        } else if (diff>100&&diff<150) {
            steps = 3
        } else if. i += steps timeout =setTimeout(animate,1000*steps/diff)
       } else {
           digitalBeating = num
       }
       let numList = i.toString().split(' '} animate()}Copy the code

We defined a variable steps as the step size to guarantee the number of calls in a second, but this is stupid because you have no way of knowing what the diff difference is and it’s not capped so let’s keep changing

transNum(num,digitalBeating,diff) {
    leti = digitalBeating, timeout = null, len = diff.toString().length, steps = Math.pow(10,len-2); Const animate = () => {if (timeout) {
           clearTimeout(timeout)
           timeout = null
       }
       if (i<num) {
        if(diff<10) {
            steps = 1
        }
        if (diff/steps>50) {
            steps *= 2
        }
        
        i += steps
        timeout = setTimeout(animate,1000*steps/diff)
       } else {
           digitalBeating = num
       }
       let numList = i.toString().split(' '} animate()}Copy the code

At this point, we can guarantee 50 calls per second. However, you may find that the last change in the number is I >num, which is definitely not what we want

transNum(num,digitalBeating,diff) {
    leti = digitalBeating, timeout = null, len = diff.toString().length, steps = Math.pow(10,len-2); Const animate = () => {if (timeout) {
           clearTimeout(timeout)
           timeout = null
       }
       if (i<num) {
        if(diff<10) {
            steps = 1
        }
        if (diff/steps>50) {
            steps *= 2
        }
        
        i += steps
        timeout = setTimeout(animate,1000*steps/diffif (num-i<steps) {
            i = num
        }
       } else {
           digitalBeating = num
       }
       let numList = i.toString().split(' '} animate()}Copy the code

Let’s see if we can basically meet the requirements and can you guarantee that there will be no delay so it should be done in less than one second

transNum(num,digitalBeating,diff) {
    letI = digitalBeating, timeout = null, len = diff.toString().length, steps = math.pow (10,len-2), N1 = 50, _lastTime = new Date(); n2 = 50, _lastTime = new Date(); Const animate = () => {if (timeout) {
           clearTimeout(timeout)
           timeout = null
       }
       let_nowTime = new Date() _nowTime = new Date(if (i<num && num-i>=steps && _nowTime - _lastTime<1000) {
        if(diff<n1) {
            steps = 1
        }
        if (diff/steps>n2) {
            steps *= 2
        }
        
        i += steps
        timeout = setTimeout(animate,1000*steps/diff)
       } else {
           i = num
           clearTimeout(timeout)
           timeout = null
           digitalBeating = num
       }
       let numList = i.toString().split(' '} animate()}Copy the code

One of the things that’s not perfect is that you don’t roll numbers one by one and you use timers, which is inherently a performance drain. Is there a better way to do this