關於做常規的數字定時滾動效果

2021-09-24 07:00:16 字數 2586 閱讀 6948

目前專案團隊在做乙個接受到的數字要做成實現數字滾動效果 在輪詢的基礎上做的 就是上乙個數字到目前最新的數字的變化 我想到的就是用使用settimeout定時器,敬請讀到文章結尾再提出自己的意見,前面都是不完善的思路,最後尚可用

/**

* 定時器方法

* @param num 當前值

* @param digitalbeating 上乙個值

* @param diff num - digitalbeating的差值

*/transnum(num,digitalbeating,diff) else

let numlist = i.tostring().split('') // 這裡是為了以陣列的形式單獨展示每乙個數字

}animate()

}複製**

那麼寫到這裡是不是就可以簡單實現了呢 其實還有一段路要走,比如你考慮了效能問題了嗎

transnum(num,digitalbeating,diff) 

if (isettimeout(animate,1000/diff)

} else

let numlist = i.tostring().split('') // 這裡是為了以陣列的形式單獨展示每乙個數字

}animate()

}複製**

上一步我們增加了防抖就是在遞迴呼叫當上乙個settimeout還存在的時候 我們要清除掉settimeout 以免造成干擾和卡頓現象 那麼是不是就可以了呢 你考慮過1秒之內settimeout也有極限的嗎 根據各個瀏覽器的效能差異,應該控制在20ms~30ms之間,那麼我們進行下一步的改造

transnum(num,digitalbeating,diff) 

if (iif(diff<=50) else

if (diff=<100&&diff>50) else

if (diff>100&&diff<150) else

if ...

i += steps

timeout = settimeout(animate,1000*steps/diff)

} else

let numlist = i.tostring().split('') // 這裡是為了以陣列的形式單獨展示每乙個數字

}animate()

}複製**

我們定義了乙個變數steps作為步長來保證1秒之內呼叫的次數,可是以上的行為會不會很蠢 因為你沒辦法知道這個diff差值到底是多少 沒有封頂的 所以我們繼續改造

transnum(num,digitalbeating,diff) 

if (iif(diff<10)

if (diff/steps>50)

i += steps

timeout = settimeout(animate,1000*steps/diff)

} else

let numlist = i.tostring().split('') // 這裡是為了以陣列的形式單獨展示每乙個數字

}animate()

}複製**

目前來看大概就可以保證在1秒之內呼叫次數50次了,不過呢,你可能會發現最後一次的數字變動可能是i>num了 那麼肯定就不是我們想要的結果了,就在最後一次再加個判斷吧

transnum(num,digitalbeating,diff) 

if (iif(diff<10)

if (diff/steps>50)

i += steps

timeout = settimeout(animate,1000*steps/diff)

// 這裡作為最後一次判斷 如果最後一次的i和num的差距小於steps時 肯定會跳過了

if (num-ielse

let numlist = i.tostring().split('') // 這裡是為了以陣列的形式單獨展示每乙個數字

}animate()

}複製**

再來看看 是不是基本上能滿足需求了呢 那麼你能保證不會延遲嗎 所以應該規定在1秒之內必須跑完了

transnum(num,digitalbeating,diff) 

let _nowtime = new date() // 這一輪呼叫時的時間

// 在這裡統一判斷

if (i=steps && _nowtime - _lasttime<1000)

i += steps

timeout = settimeout(animate,1000*steps/diff)

} else

let numlist = i.tostring().split('') // 這裡是為了以陣列的形式單獨展示每乙個數字

}animate()

}複製**

唔,現在也許可行了吧 然而做了這麼多 其實還是不夠完美的 乙個是數字滾動就不是乙個數字乙個數字的滾了 而且用了定時器了 這個本身就是耗費效能的事 有沒有更優的辦法呢 當然有 請期待用css transition 3d來實現

關於做常規的數字定時滾動效果

目前專案團隊在做乙個接受到的數字要做成實現數字滾動效果 在輪詢的基礎上做的 就是上乙個數字到目前最新的數字的變化 我想到的就是用使用settimeout定時器,敬請讀到文章結尾再提出自己的意見,前面都是不完善的思路,最後尚可用 定時器方法 param num 當前值 param digitalbea...

對數字的常規處理

在c語言的學習中,對數字的處理尤為重要。其中有以下幾種常規處理數字的方法 1 統計數字的位數 2.順序輸出每一位數字 3 逆序輸出每一位數字 接下來我們可以根據這個例子,來理解c語言對整形數字的處理流程 給出乙個不多於5位的正整數,要求 1 求出它是幾位數 2 分別輸出每一位數字 3 按逆序輸出各位...

關於oracle的回滾

pl sql設置自動commit 資料庫中做增加 刪除 修改等之後需要做commit,否則資料只存在記憶體中,沒有真正提交到資料庫,乙個操作要麼commit,要麼回滾 tool preferences windows types sql window 選中autocommit sql commit ...