调用定时器的正确姿势

发表于 更新于 分类于 ， ， 阅读次数：

定时器最怕的问题

用到定时器最多的运动效果和时钟，玩过的人都知道，当业务逻辑越来越复杂的时候，假如定时器调用频繁，最怕的是不知道内存里还有几个定时器没清除。

最近在做一个音乐播放，在进度条这块，为了让进度条跑动，在进度条对象的原型链上调用了定时器。

在调用的时候，犯了新手很容易犯的错误。在播放下一首的时候，又生成了另一个进度条对象，所以页面开了两个定时器，管理定时器很麻烦。

而且这个定时器会在别的页面调用，就涉及到如何正确的把这个定时器导出去。另外，调用的时候，我要逻辑立即跑一次，就是让定时器立即执行，而不是等到规定的时间去执行，那就慢了一步。

废话不多说，调用定时器的正确姿势如下图(code)：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
//进度计时
		timing: function(speed) {

			//计时
			var n = ++this.n;
			var m = parseInt(n/60);
			var s = parseInt(n%60);
			var curr = this.toDub(m) + ':' + this.toDub(s);
			this.currNode.innerHTML = curr;

			//progress
			this.steps += speed;
			if(this.steps >= this.max*100) clearInterval(this.timer);

			this.step.style.width = Math.min(this.steps/100, this.max) + 'px';
			this.btn.style.left = Math.min(this.steps/100, this.max) + 'px';
	
		},

		running: function() {
			
			var that = this;
			var speed = (that.max/that.sum).toFixed(2);
			speed = parseFloat(speed) * 100;

			//播放时立即调用
			this.timing(speed);	

			clearInterval(this.timer);
			//必须返回出去，在外才能清除计时器
			this.timer = setInterval(function() {
					//计时
					var n = ++that.n;
					if(n > that.sum) {
						n = that.sum
					}
					var m = parseInt(n/60);
					var s = parseInt(n%60);
					var curr = that.toDub(m) + ':' + that.toDub(s);
					that.currNode.innerHTML = curr;

					//progress
					that.steps += speed;
					if(that.steps >= that.max*100) clearInterval(that.timer);

					that.step.style.width = Math.min(that.steps/100, that.max) + 'px';
					that.btn.style.left = Math.min(that.steps/100, that.max) + 'px';
				}, 1000)

			return this.timer
		},

想要在别的页面调用，那就要把定时器赋值给全局的变量。页面上只有一个全局对象Audio，可以这样做：
1
Audio.timer = progress.running;

这样清楚定时器也方便：
·
1
clearInterval(Audio.timer);