js实现多个倒计时并行 js拼团倒计时


Posted in Javascript onFebruary 25, 2019

本文是对类似于拼团,多个商品每个都有各自的倒计时,一开始接到接到这个需求也是头疼了一阵子,如果是在商品列表少的时候完全就可以写成死的,固定的变量,写几个定时器就ok了,

但是这次数据是活的,看一些拼团app都可以实现,既然能实现就搞起来,有了以下的想法 使用环境 vue

写一个准备渲染的死数据

data () {
 return {
  list: [ // 准备渲染的数据
   {
    remainTime: 900000, // 距离结束还有多久
    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)
}

捋清逻辑

首先, 根据逻辑对倒计时的方法进行更改,我们直接使用的就是距离结束还有多少时间的时间戳 ,我的思路是用一个定时器达到一个并行多个倒计时的思路,所以先将方法进行优化

  • 不需要获取时间
  • 也不需要一些时间计算
  • 因为是多个倒计时并行 所以清楚定时器的逻辑需要进行更改
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)
}

简化完毕, 把自己刚才的思路带进方法内

在定时器里 写一个循环 每次减少一秒 让当前数据内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 = `距离结束:<b>${day}</b> 天 <b>${hour}</b> 
时 <b>${min}</b> 分 <b>${sec}</b> 秒`
    self.list[i].remainTimeStr = format
    } else {
    // 进行判断 如果数据内所有的倒计时已经结束,那么结束定时器, 如果没有那么继续执行定时器
    let flag = self.list.every((val, ind) => 
 
val.remainTime <= 0)
    if (flag) clearInterval(timer)
    self.list[i].remainTimeStr = `距离结束:<b>00</b> 天 
<b>00</b> 时 <b>00</b> 分 <b>00</b> 秒` // 结束文案
    }
  }
 }, 1000)
}

这样 并行多个定时器就做好了, 但是发现了一个问题 当你切换路由的时候 发下你的定时器如果未结束 他还在执行,这样对性能造成了一些影响, 虽说用户看不到,但是也要解决,提高用户浏览体验
在你切换页面的时候 使用vue中的生命周期函数把数据更改为0 就ok

destroyed () {
 this.list.forEach((val) => {
  val.remainTime = 0
 })
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js每次Title显示不同的名言
Sep 25 Javascript
Javascript 强制类型转换函数
May 17 Javascript
JS获取几种URL地址的方法小结
Feb 26 Javascript
简单分析javascript面向对象与原型
May 21 Javascript
js仿腾讯QQ的web登陆界面
Aug 19 Javascript
vue.js指令v-model实现方法
Dec 05 Javascript
基于AngularJS的拖拽文件上传的实例代码
Jul 15 Javascript
JavaScript常见事件处理程序实例总结
Jan 05 Javascript
Node.js原生api搭建web服务器的方法步骤
Feb 15 Javascript
vue实现微信分享链接添加动态参数的方法
Apr 29 Javascript
详解django模板与vue.js冲突问题
Jul 07 Javascript
Vue中登录验证成功后保存token,并每次请求携带并验证token操作
Sep 08 Javascript
js实现网页同时进行多个倒计时功能
Feb 25 #Javascript
js实现一个页面多个倒计时的3种方法
Feb 25 #Javascript
Vue自定义指令上报Google Analytics事件统计的方法
Feb 25 #Javascript
写一个Vue Popup组件
Feb 25 #Javascript
利用Webpack实现小程序多项目管理的方法
Feb 25 #Javascript
JavaScript中构造函数与原型链之间的关系详解
Feb 25 #Javascript
JavaScript中的事件与异常捕获详析
Feb 24 #Javascript
You might like
phpMyAdmin下载、安装和使用入门教程
2007/05/31 PHP
php程序之die调试法 快速解决错误
2009/09/17 PHP
php下安装配置fckeditor编辑器的方法
2011/03/02 PHP
利用ajax和PHP实现简单的流程管理
2017/03/23 PHP
取得一定长度的内容,处理中文
2006/12/20 Javascript
js 完美图片新闻轮转效果,腾讯大粤网首页图片轮转改造而来
2011/11/21 Javascript
20条学习javascript的编程规范的建议
2014/11/28 Javascript
jQuery中bind()方法用法实例
2015/01/19 Javascript
jQuery实现文本框输入同步的方法
2015/06/20 Javascript
浅析如何利用angular结合translate为项目实现国际化
2016/12/08 Javascript
微信小程序 闭包写法详细介绍
2016/12/14 Javascript
小发现之浅谈location.search与location.hash的问题
2017/06/23 Javascript
jQuery实现图片简单轮播功能示例
2018/08/13 jQuery
解决vue无法设置滚动位置的问题
2018/10/07 Javascript
Node爬取大批量文件的方法示例
2019/06/28 Javascript
浅析Vue下的components模板使用及应用
2019/11/27 Javascript
用Python的Django框架完成视频处理任务的教程
2015/04/02 Python
在Python的Flask框架中实现全文搜索功能
2015/04/20 Python
简单介绍Python中的floor()方法
2015/05/15 Python
Python栈类实例分析
2015/06/15 Python
python pandas库中DataFrame对行和列的操作实例讲解
2018/06/09 Python
朴素贝叶斯分类算法原理与Python实现与使用方法案例
2018/06/26 Python
对TensorFlow中的variables_to_restore函数详解
2018/07/30 Python
Python文件监听工具pyinotify与watchdog实例
2018/10/15 Python
对python中矩阵相加函数sum()的使用详解
2019/01/28 Python
python 非线性规划方式(scipy.optimize.minimize)
2020/02/11 Python
移动端Html5页面生成图片解决方案
2018/08/07 HTML / CSS
马来西亚演唱会订票网站:StubHub马来西亚
2018/10/18 全球购物
香港最大的洋酒零售连锁店:屈臣氏酒窖(Watson’s Wine)
2018/12/10 全球购物
美国尼曼百货官网:Neiman Marcus
2019/09/05 全球购物
数控专业大学毕业生职业规划范文
2014/02/06 职场文书
城市创卫标语
2014/06/17 职场文书
女方离婚起诉书
2015/05/18 职场文书
跑吧孩子观后感
2015/06/10 职场文书
大学生支教感言
2015/08/01 职场文书
火锅店的开业营销方案范本!
2019/07/05 职场文书