React中需要多個倒計時的問題

最近有乙個需求是做乙個閃購列表，列表中每乙個商品都有倒計時，如果每乙個倒計時都去生成乙個settimeout的話，乙個頁面就會有很多定時器，感覺這種做法不是非常好，於是換了乙個思路。

思路是這樣的，乙個頁面只生成乙個定時器。頁面利用物件去維護乙個**函式列表，key可以是id等唯一標識，value就是更新時間的函式，我這裡用的是setstate。提供乙個往物件裡新增**函式的方法和乙個移除**函式的方法。

// 用於存放每個倒計時的**方法

const countdownfunclist = {};
const addfunc = (key, func) => 
const removefunc = (key) =>

生成乙個定時器，隔一定的時間就去遍歷**函式列表，呼叫裡面的函式。

let intervalhandler = -1;

const countdown = () => 
intervalhandler = settimeout(() => 
})}, 300);
}

具體呼叫是呼叫timecontent方法來處理展示的時間。

const timecontent = (millisecond) =>  天  :  : 

); } else : : 
); }
return countdowndom;
}

這個方法有乙個缺點就是當前時間的獲取，除了初始化步驟以外，之後的更新都是通過new date()來獲取的，這樣存在獲取的時間可能並不是正確的當前時間的問題。

完整**如下：

// 用於存放每個倒計時的**方法

const countdownfunclist = {};
const addfunc = (key, func) => 
const removefunc = (key) => 
const timecontent = (millisecond) => 天 : : 
); } else : : 
); }
return countdowndom;
}let intervalhandler = -1;
const countdown = () => 
intervalhandler = settimeout(() => 
})}, 300);
}countdown();
class countdownitem extends react.component 
this.parsedisplaytime = this.parsedisplaytime.bind(this);
}componentdidmount() = this.props;
// 往事件列表新增**函式
addfunc(id, this.updatetime);
}componentwillunmount() = this.props;
// 從事件列表移除**函式
removefunc(id);
}updatetime(time) )
}parsedisplaytime() = this.props;
const = this.state;
const subtracttime = endtime - currenttime;
let countdowndom = '';
if(subtracttime > 1000)
);}else
return countdowndom;
}render());}
}

js 多個倒計時，毫秒倒計時

其實主要是借鑑了了這篇文的寫法 俺稍作了修改，以便更適合我的需要 實現功能 呼叫乙個函式，傳入html元素的id，和乙個截止時間 unix時間戳 在該html元素中列印出到當前到截止時間為止的倒計時,精確到毫秒 效果圖如下 h2 毫秒的倒計時 h2 div id timer1 div div id ...

多個倒計時並行 拼團倒計時

本文是對類似於拼團，多個商品每個都有各自的倒計時，一開始接到接到這個需求也是頭疼了一陣子，如果是在商品列表少的時候完全就可以寫成死的，固定的變數，寫幾個定時器就ok了，寫乙個準備渲染的資料,data countdowm timestamp 天 小時 分 秒 if day 0 hour 0 小時 分 ...

UITableView 中倒計時

變數 int keeptime nstimer timer timer 事件中keeptime 思路 在cell中單獨寫乙個更新時間顯示的方法，每次呼叫該方法時，只需要把已知時間 keeptime，再進行計算就可以了。1.以秒為單位倒計時 將timer的timeinterval設定為1，這種只需要t...