javascript - requestAnimationFrame 不适用于小于 1 的十进制数

Question

requestAnimationFrame 由于某种原因无法使用小数。通常在 Canvas 中制作动画时我可以使用小数，但在 dom 元素的情况下我会失败。正如您在下面看到的，我正在对单个 div 的左侧位置进行动画处理，该位置适用于 n > 1，但不适用于 n < 1(0.1、0.2 等)。

为什么会出现这样的情况呢？

https://jsfiddle.net/m1qzqvu8

var elem = document.getElementsByTagName('div')[0]

function fn(){
var x = parseInt(elem.style.left);
x += 0.4
elem.style.left = x + "px"
    requestAnimationFrame(fn)
}

fn()

我尝试完成这项工作的原因是速度。我需要让事情变得更慢或更快。

Answer 1

您正在使用parseInt。这会将小数值四舍五入为整数，因此您总是会得到 parseInt(10.4) + 0.4 = 10 + 0.4 = 10.4，无限迭代。

使用 parseFloat 应该可以解决此问题:https://jsfiddle.net/m1qzqvu8/1/

注意:您应该始终为 parseInt 提供基数参数。