定时器和线程
定时器并不是JavaScript中的一项功能。
定时器作为对象和方法的一部分，才能在浏览器中使用。
如果在非浏览器环境下使用JavaScript，很可能定时器就不存在了。这时候就不得不使用特定实现的功能（如Rhino中的线程）
定时提供了一种让一段代码在一定毫秒后，再异步执行的能力。
由于JavaScript是单线程的特性，定时器可以提供一种跳出这种限制的方法。
设置和清除定时器
设置和清除定时器都是window对象的方法
方法
| 方法 | 格式 | 描述 |
|---|---|---|
| setTimeout | id = setTimeout(fn, delay) | 启动一个定时器，单次执行 |
| clearTimeout | clearTimeout(id) | 清除单次执行的定时器 |
| setInterval | id = setInterval(fn, delay) | 启动一个定时器，多次执行 |
| clearInterval | clearInterval(id) | 清除多次执行的定时器 |
注意：JavaScript的延迟时间是不能保证的。
原因和JavaScript线程的本质有很大的关系
执行线程中的定时器执行
异步事件的处理程序，如用户的界面事件和定时器，在线程中没有代码执行的时候才进行执行。这就是说，处理程序在执行时必须进行排队执行，并且一个处理程序并不能中断另外一个处理程序。
timeout和interval之间的区别
以下两种写法，都可以实现周期性的定时器
setTimeout(function repeatMe() {
// ...
setTimeout(repeatMe, 10);
}, 10);
setInterval(function () {
// ...
}, 10)
区别
在setTimeout()代码中，要在前一个callback回调执行结束后并延迟10毫秒（可能更多，但不会更少）以后，才能执行setTimeout()。
而setInterval()则是每隔10毫秒就尝试执行callback回调，而不是关注上一个callback是何时执行的。
回顾下
- JavaScript引擎是单线程执行，异步事件必须要排队等待才能执行
- 如果无法立即执行定时器，该定时器会被推迟到下一个可用的执行时间点上（可能更长，但不会比指定的延迟时间少）
- 如果一直被延迟，到最后，Interval间隔定时器可能会无延迟执行，并且同一个interval处理程序的多个实例不能同时进行排队
- setTimeout()和setInterval()在触发周期的定义上是完全不同的
使用定时器处理昂贵的计算过程
作为定时器，它在一段时间之后，可以有效暂停一段JavaScript代码的执行，定时器还可以将代码的各个部分，分解成不会让浏览器挂掉的碎片。
下面这段代码，就会造成页面的假死，让用户无法操作
var tbody = document.querySelector('tbody');
for (var i = 0; i < 20000; i++) {
var tr = document.createElement('tr');
for (var j = 0; j < 6; j++) {
var td = document.createElement('td');
td.appendChild(document.createTextNode(i + ', ' + j));
tr.appendChild(td)
}
tbody.appendChild(tr);
}
使用定时器解决问题
var rowCount = 20000; // 总行数
var divideInto = 10; // 执行的次数
var chunkSize = rowCount / divideInto; // 每组的次数
var iteration = 0; // 迭代
var tbody = document.querySelector('tbody');
setTimeout(function generateRows() {
var base = chunkSize * iteration;
for (var i = 0; i < chunkSize; i++) {
var tr = document.createElement('tr');
for (var j = 0; j < 6; j++) {
var td = document.createElement('td');
td.appendChild(document.createTextNode((i + base) + ', ' + j + ',' + iteration));
tr.appendChild(td)
}
tbody.appendChild(tr);
iteration++;
if (iteration < divideInto) {
setTimeout(generateRows, 0)
}
}
}, 0);
网友评论