如何使用requestAnimationFrame实现降价效果?

Question

<span class="price" data-price="123.59" data-starttime="1509809876">123.59</span>
<span class="price" data-price="255.76" data-starttime="1509810123">255.76</span>

列表页面中有多个类似以上形式的的，每秒降价0.1元，那么span内的数字就不断的变小，目前遇到的问题是每次只能实现第一条价格会动起来，后面的都不动,另外一个困扰是，我使用了settimeout来不断获取当前时间和data-starttime判断降价时间是否开始了，导致requestAnimationFrame的动画平率越来越快

求大神指点

Answer 1

不解，这种DOM操作，更新频率不大，一般用不到requestAnimationFrame，直接通过setInterval(func, 1000)不可以吗？

针对只有第一条价格会动，可能是DOM查询的不对。

用jq的话，大概代码如下：

setInterval(function() {
    var time = new Date().getTime()
    $('.price').each(function() {
        if(time > $(this).attr('data-starttime')) {
             $(this).text(parseInt($(this).text()) - 0.1);
        }
    })
}, 1000)