次のスライドアニメーションのスピードを上げる方法は？

Question

以下のスライドアニメーションには慣性があります。スライドアニメーションは継続していて、時間の経過とともに速度が徐々に低下します。 intervalが100に達すると、アニメーションが停止します。

let interval = 1 // initial speed 
const timer = function() { 
    ++interval // decrease the speed 
    slideThumbs(thumbs, direction) // do the sliding animation 
    const timeOut = setTimeout(timer, interval) 
    // stop animation when the speed reaches 100 
    if (interval === 100) { 
    clearTimeout(timeOut) 
    } 
} 
timer() 

これは機能します。しかし、それは非常に遅いです。どうすれば全体のスピードを上げることができますか？

EDIT（初期アニメーションが停止したときにスライドから？）：

これはslideThumbsの内側に何である：

const totalThumbs = newChildrenArr.length 
const thumbWidth = 144 // thumb width plus margin 
const slideLimit = (totalThumbs - 1) * thumbWidth 
if (arrow === 'left') { 
    store.state.translateX += 1 // add one pixel to the `transform: translateX` attribute 
} 

Answer 1

++間隔は間隔の値が増加します。インターバルが増え、アニメーションが遅くなります。私がお勧めしたい

だけのものは100

から小さい値への各呼び出しの間のデルタを減少させ、間隔を短くすることである。またslideThumbs方法のいくつかのパフォーマンスの分析を行うに見て - それはこのことかもしれませんオーバーヘッドを引き起こしていますが、コードを見ずにテストすることは困難です。

（編集 - 質問にはコードが表示されています）トランスフォームにはどれくらいの時間がかかりますか？私はそれがこの場合に多く実行されるので、パフォーマンスの低下を引き起こしているかもしれないことを示唆したいと思います。

Answer 2

Hereは私が最初に `のsetTimeout（タイマー、インターバル）`あなたは1ミリ秒後に発射されない場合は、これが迅速になり、コメント

function ClosureWrapper(callback) { 
    var distance = 50; 
    var timer = Trigger; 

    function Trigger() { 
    if (distance <= 0) { 
     callback(); 
    } else { 
     distance--; 
     //do something 
     console.log("distance moved this interval is: " + distance); 
    } 
    } 
    return timer; 
} 

var someTimer = setInterval(ClosureWrapper(function() { 
    console.log("Movement Finished") 
    clearInterval(someTimer); 
}), 100);