关于前端在vue中实现‘距离某个时间点的倒计时’问题：设置了间隔计算时间，刚开始有停顿。

//函数接受一个结束时间，单位为毫秒，算出当前距离结束时间点的时间，输出一个对象
//输出示例：{
//         hourNum: '12',
//         minuteNum: '13',
//         secondNum: '14',
//        }function getSurplusDate(endTime) {let beginTime = +new Date() / 1000endTime = endTime / 1000if (endTime > beginTime) {let surplusTime = endTime - beginTimelet hourNum = Math.floor(surplusTime / (1 * 60 * 60))let minuteNum = Math.floor((surplusTime % (1 * 60 * 60)) / 60)let secondNum = Math.floor(surplusTime % 60)hourNum = hourNum < 10 ? '0' + hourNum : hourNum.toString()minuteNum = minuteNum < 10 ? '0' + minuteNum : minuteNum.toString()secondNum = secondNum < 10 ? '0' + secondNum : secondNum.toString()return {hourNum: hourNum,minuteNum: minuteNum,secondNum: secondNum,}}
}

    //把时间分割成数组传给数据层。这里可根据业务需求灵活处理，//因为我这里设计要求每个小框放一个数字getCountDown(endTime) {let surplusTime = getSurplusDate(endTime)this.hour = surplusTime.hourNum.split('')this.minute = surplusTime.minuteNum.split('')this.second = surplusTime.secondNum.split('')},

      this.timer = setInterval(this.getCountDown1000, //每一秒调用一次‘1667541010000’ //设置的结束时间)

上面代码就是实现倒计时，这样看起来没什么问题，每隔1秒计算当前时间距离结束时间的剩余时间，然后把值传给数据层。但是刚开始进入页面，需要立即看到开始倒计时，而我们的setInterVal设置隔1秒执行一次，也就是说，计算剩余时间的函数是在刚进入页面一秒之后才执行第一次，显然与我们的需求有偏差。

那怎么解决呢？最容易想到的方法就是，在setInterVal前面先掉用一次计算剩余时间的函数，这个方法也可以，但有没有更‘漂亮’的方法呢？

看下面加的代码和上面代码的区别！

我们只需在执行getCountDown结束地时候把它自身return出去。在setInterVal执行的时候，立即执行一次getCountDown，然后getCountDown会把它自身return出来当成setInterVal的第一个参数。

关于前端在vue中实现‘距离某个时间点的倒计时’问题：设置了间隔计算时间，刚开始有停顿。相关推荐

前端笔记-Vue中缺少router-view导致跳转失效
今天这个问题搞了我2个多小时,原因是我在App.vue里面把<router-view/>删除了,导致了跳转失败! 最后才发现,这个App.vue被改了,在此记录下,方便以后查阅! 这里个人 ...
前端笔记-vue中引入Bootstrap
目录过程演示源码打包下载过程演示首先在项目中导入插件: npm install jquery --save npm install bootstrap --save npm install p ...
vue window.location.href 返回页面不刷新_前端框架vue中的keep-alive总结实践
Vue keep-alive实践总结是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM. 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们.和相似, 是一个抽象组件 ...
vue中,静态书写select的option选项时如何设置默认选中项
@mishu vue中,静态书写select标签的option选项时如何设置默认选中项在vue框架下,给select标签使用v-model绑定数据时,我们的selected=''selected'' ...
前端框架Vue中各个文件夹的具体作用简介
对于部分前端入门的同学而言,了解使用Vue框架创建项目中各个文件夹的作用是十分必要的.下面对各个文件夹的作用进行一个简单的介绍: node_modules 是用于存放项目所需要的依赖. public文 ...
前端笔记-vue中使用router进行页面跳转及除掉url中的#
目录演示代码演示运行截图如下: 点击后,url跳转如下: 代码页面跳转的关键程序结构如下: aaa.vue <template><div>我是aaa<butt ...
@query传参_前端框架vue中query和params传参
注意(用params传参,F5强制刷新参数会被清空,用query,由于参数适用路径传参的所以F5强制刷新也不会被清空.(传参强烈建议适用string)) 也可以选用sessionstorage/loc ...
如何在网页中设置一个定时器计算时间？
写一个简单的计数js代码首先先写一个div,用于存放计数器,并且通过改变样式可以改变计数器的样子 <body> <div id="le"></div ...
js 或者vue中for循环去掉最后一个逗号
js 或者vue中for循环去掉最后一个逗号一个感觉很简单的问题,刚开始我没有思路,现在也没有更好的思路问题描述: 后端返回的一个数组,前端这边需要循环把名字展示,要求在展示时,每个名字后用** ...

关于前端在vue中实现‘距离某个时间点的倒计时’问题：设置了间隔计算时间，刚开始有停顿。

关于前端在vue中实现‘距离某个时间点的倒计时’问题：设置了间隔计算时间，刚开始有停顿。相关推荐

最新文章

热门文章