js實現(xiàn)多個倒計時并行 js拼團倒計時
更新時間：2019年02月25日 10:58:09 作者：Yhl丶
這篇文章主要為大家詳細介紹了js實現(xiàn)多個倒計時并行功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文是對類似于拼團，多個商品每個都有各自的倒計時，一開始接到接到這個需求也是頭疼了一陣子，如果是在商品列表少的時候完全就可以寫成死的，固定的變量，寫幾個定時器就ok了，
但是這次數(shù)據(jù)是活的，看一些拼團app都可以實現(xiàn)，既然能實現(xiàn)就搞起來，有了以下的想法 使用環(huán)境 vue
寫一個準備渲染的死數(shù)據(jù)
data () {
return {
list: [ // 準備渲染的數(shù)據(jù)
{
remainTime: 900000, // 距離結(jié)束還有多久
remainTimeStr: '' // 展示文案
},
{
remainTime: 400000,
remainTimeStr: ''
},
{
remainTime: 60500,
remainTimeStr: ''
},
]
}
}
百度copy一個倒計時的方法
countdowm (timestamp) {
let self = this
let timer = setInterval(function () {
let nowTime = new Date()
let endTime = new Date(timestamp)
let t = endTime.getTime() - nowTime.getTime()
if (t > 0) {
let day = Math.floor(t / 86400000)
let hour = Math.floor((t / 3600000) % 24)
let min = Math.floor((t / 60000) % 60)
let sec = Math.floor((t / 1000) % 60)
hour = hour < 10 ? '0' + hour : hour
min = min < 10 ? '0' + min : min
sec = sec < 10 ? '0' + sec : sec
let format = ''
if (day > 0) {
format = `${day}天${hour}小時${min}分${sec}秒`
}
if (day <= 0 && hour > 0) {
format = `${hour}小時${min}分${sec}秒`
}
if (day <= 0 && hour <= 0) {
format = `${min}分${sec}秒`
}
self.content = format
} else {
clearInterval(timer)
self.content = 'over'
}
}, 1000)
}
捋清邏輯
首先， 根據(jù)邏輯對倒計時的方法進行更改,我們直接使用的就是距離結(jié)束還有多少時間的時間戳 ，我的思路是用一個定時器達到一個并行多個倒計時的思路，所以先將方法進行優(yōu)化
- 不需要獲取時間
- 也不需要一些時間計算
- 因為是多個倒計時并行 所以清楚定時器的邏輯需要進行更改
countdowm (timestamp) {
let self = this
let timer = setInterval(function () {
let t = timestamp
if (t > 0) {
let day = Math.floor(t / 86400000)
let hour = Math.floor((t / 3600000) % 24)
let min = Math.floor((t / 60000) % 60)
let sec = Math.floor((t / 1000) % 60)
day = day < 10 ? '0' + day : day
hour = hour < 10 ? '0' + hour : hour
min = min < 10 ? '0' + min : min
sec = sec < 10 ? '0' + sec : sec
let format = ''
format = `${day}天${hour}小時${min}分${sec}秒`
self.content = format
} else {
// clearInterval(timer)
self.content = 'over'
}
}, 1000)
}
簡化完畢， 把自己剛才的思路帶進方法內(nèi)
在定時器里 寫一個循環(huán) 每次減少一秒 讓當前數(shù)據(jù)內(nèi)remainTime時間戳-1000
countdown () {
let self = this
let timer = setInterval(function () {
for (let i = 0; i < self.list.length; i++) {
self.list[i].remainTime -= 1000
let t = self.list[i].remainTime
if (t > 0) {
let day = Math.floor(t / 86400000)
let hour = Math.floor((t / 3600000) % 24)
let min = Math.floor((t / 60000) % 60)
let sec = Math.floor((t / 1000) % 60)
day = day < 10 ? '0' + day : day
hour = hour < 10 ? '0' + hour : hour
min = min < 10 ? '0' + min : min
sec = sec < 10 ? '0' + sec : sec
let format = ''
format = `距離結(jié)束：<b>${day}</b> 天 <b>${hour}</b>
時 <b>${min}</b> 分 <b>${sec}</b> 秒`
self.list[i].remainTimeStr = format
} else {
// 進行判斷 如果數(shù)據(jù)內(nèi)所有的倒計時已經(jīng)結(jié)束，那么結(jié)束定時器， 如果沒有那么繼續(xù)執(zhí)行定時器
let flag = self.list.every((val, ind) =>
val.remainTime <= 0)
if (flag) clearInterval(timer)
self.list[i].remainTimeStr = `距離結(jié)束：<b>00</b> 天
<b>00</b> 時 <b>00</b> 分 <b>00</b> 秒` // 結(jié)束文案
}
}
}, 1000)
}
這樣 并行多個定時器就做好了, 但是發(fā)現(xiàn)了一個問題 當你切換路由的時候 發(fā)下你的定時器如果未結(jié)束 他還在執(zhí)行，這樣對性能造成了一些影響， 雖說用戶看不到，但是也要解決，提高用戶瀏覽體驗
在你切換頁面的時候 使用vue中的生命周期函數(shù)把數(shù)據(jù)更改為0 就ok
destroyed () {
this.list.forEach((val) => {
val.remainTime = 0
})
}
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- 利用Chrome DevTools直接調(diào)試Node.js和JavaScript的方法詳解(并行)
- headjs實現(xiàn)網(wǎng)站并行加載但順序執(zhí)行JS
- 深入理解JavaScript中的并行處理
- Javascript的并行運算實現(xiàn)代碼
- 前端 javascript 實現(xiàn)文件下載的示例
- Javascript前端下載后臺傳來的文件流代碼實例
- JavaScript實現(xiàn)多文件下載方法解析
- 原生js實現(xiàn)文件上傳、下載、封裝等實例方法
- JavaScript實現(xiàn)文件下載并重命名代碼實例
- vue實現(xiàn)在線預覽pdf文件和下載（pdf.js）
- 使用 JavaScript 創(chuàng)建并下載文件(模擬點擊)
- node.js express框架實現(xiàn)文件上傳與下載功能實例詳解
- JavaScript 中如何實現(xiàn)大文件并行下載
相關文章
D3.js是一個基于數(shù)據(jù)操作文檔JavaScript庫。D3幫助你給數(shù)據(jù)帶來活力通過使用HTML、SVG和CSS。D3重視Web標準為你提供現(xiàn)代瀏覽器的全部功能，而不是給你一個專有的框架。最近在學習D3.js，這個例子是通過d3.js畫一個簡單的柱狀圖。下面來一起看看吧。2016-12-12
大多數(shù)的javascript操作都需要獲取先獲取頁面上的某個元素，引用其為當前腳本中的一個對象，然后加以操作或獲取節(jié)點樹形。2011-03-03
JavaScript是一種解釋型語言，所以能無法達到和C/Java之類的水平，限制了它能在客戶端所做的事情，為了能改進他的性能，我想基于我以前給JavaScript做過的很多測試來談談自己的經(jīng)驗，希望能幫助大家改進自己的JavaScript腳本性能。2007-02-02![js之完全兼容ie與firefox的拖動層代碼[測試好用]](http://img.jbzj.com/images/xgimg/bcimg3.png)
經(jīng)測試，這個拖到效果不錯，多瀏覽器支持。方便做網(wǎng)站的朋友使用2008-10-10
這篇文章主要給大家介紹了JS中可能會常用到的一些數(shù)據(jù)處理方法,好多知識寫下來也能加深一下自身的記憶,文中給出了詳細的實例代碼,對大家學習或者使用JS具有一定的參考學習價值,需要的朋友可以參考下2021-09-09
WordPress 單頁面上一頁下一頁的實現(xiàn)方法【附代碼】
下面小編就為大家?guī)硪黄猈ordPress 單頁面上一頁下一頁的實現(xiàn)方法【附代碼】。小編覺得非常不錯。給大家分享一下。希望能給大家一個參考。2016-03-03
深入理解JavaScript字節(jié)二進制知識以及相關API
當前，前端對二進制數(shù)據(jù)有許多的API可以使用，這豐富了前端對文件數(shù)據(jù)的處理能力，有了這些能力，就能夠?qū)D片等文件的數(shù)據(jù)進行各種處理。本文將著重介紹一些前端二進制數(shù)據(jù)處理相關的API知識，希望對大家有所幫助2023-02-02
JavaScript 對引擎、運行時、調(diào)用堆棧的概述理解
這篇文章旨在深入挖掘JavaScript，以及向大家解釋JavaScript是如何工作的。非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-10-10
在本篇文章里小編給大家整理的是關于JS模塊化的知識點分享，有需要的朋友們可以學習下。2019-10-10
下面小編就為大家?guī)硪黄斦?.data()的用法和作用。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02