JavaScript基础系列 —— 定时器

函数

setTimeout、setInterval

接受的参数

  1. function (也可用字符串但是不建议)

  2. delay

返回值:定时器序列号——number类型

1
2
3
4
5
6
7
8
9
10
11
12
var a = setTimeout(function () {}, 0);
var b = setTimeout(function () {}, 30);
var c = setInterval(function () {console.log('interval func loading');}, 1000);

console.log('a is ' + a);
console.log('b is ' + b);
console.log('c is ' + c);

console.log(typeof a, typeof b, typeof c);

// 此时,如果使用number直接关闭定时器,会怎么样呢。例如:
clearInterval(16); // 16只是类比的一个number

工作机制

  1. 为什么setTimeout 明明只执行一次,为什么又要有clearTimeout的存在?
1
2
3
4
5
6
var timer = null;
var func = function () {
console.log('timeout func loading');
timer = setTimeout(func, 1000);
};
func();

运行方式

1
2
3
4
setTimeout(function () {
alert('timeout');
}, 0);
alert(now);

setTimeout 与 setInterval 的区别

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var sleep = function (ms) {
// do something
};

// timeout
var timer = null;
var func = function () {
console.log('timeout func loading');
timer = setTimeout(func, 20);
};
setTimeout(func, 20);
sleep(100);

// interval
setInterval(function () {
console.log('interval func loading');
}, 20);
sleep(100);

可能的用法

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
// 将一个函数的调用,设置为没500ms只触发一次
var renderMinatoInfo = (function() {
var timer = null,
helper = function(tips) {
var data = [];
tips = tips && tips.length ? tips : [];

_.each(Status, function(items, eventId) {
if (Utils.specialFilter(eventId)) {
_.each(items, function(item, cartId) {
// 需要过滤非选中的商品
if (Utils.specialFilter(cartId) && item.checked !== false) {
data.push([Number(cartId), Models.effectiveCarts[eventId][cartId].sku_id, item.num]);
}
});
}
});

// 发送请求
Api.getMinatoInfo({
postdata: JSON.stringify(data),
total_fee: Status.subtotalPrice

}, function(resp) {
if (resp.tips && resp.tips.length) {
tips = tips.concat(resp.tips);
}
Views.renderActivityTips(tips);

}, function () {
Views.renderActivityTips(tips);
});
};

return function(tips) {
clearTimeout(timer);
timer = setTimeout(function() {
helper(tips);
}, 500);
return this;
};
})()