JS定时器刷新页面计时重新开始？

Question

问题/疑惑？

写一个倒计时，开始时间是系统当前时间，结束时间是在当前时间的基础加上30分钟。

目前的效果

如图所示：点击"安排人员",下面按钮进行倒计时。

存在的问题是: 页面一刷新,再重新进到该页面,计时又重新开始(30:00倒计时)。

如何设置倒计时的时间,不会重新计时,不管是页面刷新,还是关闭页面,倒计时的时间不会受到影响?

请大家给支支招。

Answer 1

这个可以把结束时间存在本地，如localStorage，下次进入页面，判断这个结束时间有没有到期，没有的话就在这个基础上进行处理。

但是这样通过修改本地时间是可以作弊的，所以严谨一点的话，可以把结束时间的计算放在服务器上，稍微复杂点，具体的看你个人选择

Answer 2

页面收到的参数 不要用还剩多少秒 或者 总计倒计时多少秒
页面收到的参数 是倒计时 结束时间，用 结束时间 和 当前时间 的差值作为倒计时秒数

Answer 3

• 点击 “安排人员” 按钮时，会进行倒计时，同时可以将结束时间记录下来。
• 结束时间记录下来的话，刷新页面后，先判断这个结束时间有没有，如果有的话，倒计时就是结束时间与现在时间的差值，否则就是没有点击 “安排人员” 按钮。

那这个结束时间存在哪里呢？有两种方案

• 如果功能要求是更换了浏览器再进入也能够看到倒计时，那这个结束时间就需要存在后端数据库中（点击 “安排人员” 按钮后，前端发送请求，将结束时间保存，这样在下次重新进入页面时，能够从后端拿到这个结束时间）
• 如果功能要求是更换了浏览器再进入可以不看到倒计时时，结束时间可以保存到前端 localStorage 中

Answer 4

从软件设计的角度看【安排人员】操作触发了数据状态的变化，所以应该对应一个“剩余时间”属性，并存储在服务端。大致流程：

1. 用户点击【安排人员】后前端调用接口，接口更新数据状态并存储操作时间（用于计算“剩余时间”）；
2. 这样每次页面刷新（或者用户第一次进入该页面）应该从服务端获取“是否已经进行【安排人员】操作”和“剩余时间”

Answer 5

点击安排人员按钮时，在当前时间加上30分钟（t）;（这个时间由后台返回，一直固定）
倒计时的时间 d(接口查询而来) = t - new Date()
d就是你每次进来需要倒计时的剩余时间；（d>0的情况）