react倒計時導致的頁面重新整理問題

2022-09-20 04:30:13 字數 381 閱讀 9999

記錄一次倒計時導致的頁面重新整理異常問題

背景如下:

做了個活動頁面,每晚21點活動開始,需要展示倒計時,需求讓倒計時自動展示,不需要使用者重新整理頁面,那麼問題來了:

1、倒計時需要一直定時,在判斷不展示的時候,需要延長倒計時時間,並且隱藏倒計時,展示其他的視覺

2、倒計時展示期間,需要每秒重新整理

3、倒計時的展示與否,需要設定state

而問題主要出現在第3點上,頻繁的設定state,導致頁面在disable cathe時,會重新整理,特別是每秒更新倒計時的時候。

這個問題的解決方案也比較簡單,那就是設定state之前,先去判斷將要設定的state和之前的是否一致,如果一致,可以不設定,如此的話,每天就只有3次設定倒計時展示的邏輯,大大減少了也沒重新整理問題

倒計時頁面

倒計基本原理 其實就是獲取兩個時間的時間差,然後除1000換算成秒數,除60換算成分,除360換算成小時,除24 360換算成日 這個函式是當前時間距離你選定的日期 函式的引數 相差的時間 function lefttime year,month,day,hour,minute,second fun...

Vue頁面載入 多條倒計時 不重新整理

用vue apicloud 寫乙個列表頁,頁面上的記錄都有乙個時間倒計時顯示。用了三天才從坑里出來,就因為少了一句話 vm.forceupdate 具體寫法如下 頁面資料 vm.init 下拉重新整理 上拉載入 拍賣倒計時 apiready function function ret,err 上拉載...

實時的頁面倒計時

倒計時 setinterval function var task user state var time2 time2 time2.replace g,相容ios var time1 getnowformatdate time1 time1.replace g,相容ios var d1 new d...