團購剩餘時間的JS基本實現?

團購網站倒計時實現，我們經常看到團購還有多少剩餘時間(倒計時)，剩餘時間不停的在減少，如果使用ajax每秒向後臺請求一次獲取剩餘時間顯示到頁面中，似乎是沒有什麼效率，如果頁面中有多個相同功能，請求的次數更多，效率更低。

解決辦法可以把剩餘時間一次請求到頁面，通過頁面js程式碼計算剩餘時間。

工具/原料

JS

方法/步驟

設定剩餘時間的JS全域性變數。

根據業務計算剩餘時間

對剩餘時間進行計算，通過JS中setTimeout或setInterval來執行

把計算結果顯示出來,如下圖。

上面的兩個方法需要在頁面初始化後，執行一次

leftTime(...,...);runLeftTime();

如果，一個頁面中需要多個計算剩餘時間的功能，方法與上面4步基本相同，只不過JS全域性變數不同，變成了一個Array或者JSON型別的物件（如var leftTimeJs = {};），在執行leftTime的時候，把每條記錄標識與剩餘時間一一對應。（如leftTimeJs[id] = leftTime;，id為記錄的唯一標識，leftTime為剩餘時間）。在runLeftTime方法中使用迴圈把結果輸出。此兩個方法在初始化時，也要執行一次。

效果如下圖：