一个IOS系统定时APP，功能与系统定时器一致
Posted rencoo
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了一个IOS系统定时APP，功能与系统定时器一致相关的知识，希望对你有一定的参考价值。
将页面分为时间显示部分，控制部分，显示计次共三个部分。实现的功能有：启动定时器，计次，停止，复位。
计算：当前显示的时间 = 当前计次的累积时间 + 已经结束的所有计次的累积时间和；
关于 new Date().getTime() 实现，google准确，Firefox 误差很大；
涉及到的时间计算，都是用 setInterval实现，没有用 new Date()；
尝试过setInterval 与 new Date两者混用，一是误差很大，二是逻辑不够强；
经测试在google浏览器和ios原组件的误差很小(毫秒级别)，准确度可靠；Firefox 误差很大；
1class Stopwatch {
2 constructor(id) {
3 this.container = document.getElementById(id);
4 this.display = this.container.querySelector(\'.display\'); // 时间显示
5 this.lap = this.container.querySelector(\'.lap\'); // 计次显示
6
7 // 计数相关变量
8 this._stopwathchTimer = null; // 计时器
9 this._count = 0; // 计次的次数
10 this._timeAccumulation = 0; // 累积时长
11 this._timeAccumulationContainer = []; // 存放已经结束的计次的容器
12 this._s = 0; // 已经结束的所有计次累积时间
13 this._stopwatchHandlers = []; // 用于tartTimer里回调的函数
14
15 // 控制流
16 this.ctrl = this.container.querySelector(\'.ctrl\'); // 控制部分
17 if(this.ctrl) {
18 let btns = this.ctrl.querySelectorAll(\'button\');
19 let startStopBtn = btns[1]; // 开始和暂停按钮
20 let lapResetBtn = btns[0]; // 计次和复位按钮
21
22 // 样式更改
23 let changeStyle = {
24 clickStart : function(){
25 lapResetBtn.disabled = \'\'; // 计次按钮生效
26 startStopBtn.innerhtml = \'停止\';
27 startStopBtn.className = \'stop\';
28 lapResetBtn.innerHTML = \'计次\';
29 lapResetBtn.className = \'active\';
30 },
31 clickStop : function() {
32 startStopBtn.innerHTML = \'启动\';
33 startStopBtn.className = \'start\';
34 lapResetBtn.innerHTML = \'复位\';
35 },
36 clickReset : function() {
37 lapResetBtn.disabled = \'disabled\'; // 计次按钮失效
38 lapResetBtn.innerHTML = \'计次\';
39 lapResetBtn.className = \'\';
40 this.display.innerHTML = \'00:00.00\';
41 this.lap.innerHTML = \'\';
42 }
43 };
44
45 // 事件处理函数
46 let eventHandler = {
47 start: function() {
48 lapResetBtn.removeEventListener(\'click\', resetBind); // 移除复位事件；选择启动，就移除复位
49 console.log(\'启动\');
50 changeStyle.clickStart.call(this); // 改变按钮显示样式
51 if(this._count === 0) { // 如果首次启动计时器，增加一条计次
52 this._count = 1;
53 // console.log(\'开始事件中的计数次\', this._count)
54 this.insertLap(); // 插入计次
55 }
56 this.startTimer();
57 startStopBtn.removeEventListener (\'click\', startBind); // 移除启动计时事件
58 lapResetBtn.addEventListener(\'click\', lapfBind) // 添加计次事件
59 startStopBtn.addEventListener(\'click\', stopBind) // 添加停止计时事件
60 },
61
62 stop: function() {
63 console.log(\'停止\');
64 changeStyle.clickStop.call(this); // 改变按钮显示样式
65 this.stopTimer(); // 停止计时;
66 startStopBtn.removeEventListener(\'click\', stopBind) // 移除停止计时事件
67 startStopBtn.addEventListener(\'click\', startBind); // 重新添加启动计时事件
68 lapResetBtn.removeEventListener(\'click\', lapfBind); // 移除计次事件;
69 lapResetBtn.addEventListener(\'click\', resetBind); // 添加复位事件
70 },
71
72 lapf: function() {
73 this.insertLap(); // 插入新计次
74 this._timeAccumulationContainer.push(this._timeAccumulation); // 将当前结束的计次推入容器，保存起来
75 this._s += this._timeAccumulationContainer[this._count - 1]; // 累加已经结束的所有计次
76 console.log(\'计次\', \'当前累积的计次时间\', this._s);
77 this._timeAccumulation = 0; // 计时器清零，这条放在求和后面！
78 this._count++;
79 },
80
81 reset: function() { // 复位事件
82 console.log(\'复位\');
83 changeStyle.clickReset.call(this); // 改变按钮显示
84 // 重置
85 this._stopwathchTimer = null;
86 this._count = 0;
87 this._timeAccumulation = 0;
如何让iOS设备上App定时执行后台任务（上）