鍍金池/ 問答/網(wǎng)絡(luò)安全  HTML/ 如何使用requestAnimationFrame實(shí)現(xiàn)降價(jià)效果?

如何使用requestAnimationFrame實(shí)現(xiàn)降價(jià)效果?

<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>

列表頁面中有多個(gè)類似以上形式的的，每秒降價(jià)0.1元，那么span內(nèi)的數(shù)字就不斷的變小，目前遇到的問題是每次只能實(shí)現(xiàn)第一條價(jià)格會(huì)動(dòng)起來，后面的都不動(dòng),另外一個(gè)困擾是，我使用了settimeout來不斷獲取當(dāng)前時(shí)間和data-starttime判斷降價(jià)時(shí)間是否開始了，導(dǎo)致requestAnimationFrame的動(dòng)畫平率越來越快

求大神指點(diǎn)

回答
編輯回答
綰青絲

不解，這種DOM操作，更新頻率不大，一般用不到requestAnimationFrame，直接通過setInterval(func, 1000)不可以嗎？

針對(duì)只有第一條價(jià)格會(huì)動(dòng)，可能是DOM查詢的不對(duì)。

用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)
2018年4月1日 10:36