如何使用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() {&nbsp; &nbsp; var time = new Date().getTime()&nbsp; &nbsp; $('.price').each(function() {&nbsp; &nbsp; &nbsp; &nbsp; if(time > $(this).attr('data-starttime')) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;$(this).text(parseInt($(this).text()) - 0.1);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; })}, 1000)