一、定时器
js的定时器主要有setTimeout和setInterval两个，下面我们分别讲讲。
1. setTimeout
setTimeout()设置任务延迟多久之后才执行，该函数第一个参数可以是可执行语句（字符串形式）或者一个函数，第二个参数是延迟的毫秒数（若省略则默认为0），后续的参数则代表第一个函数的参数。
// 下面两者一样
setTimeout('console.log(666)',1000);
setTimeout(function() {
console.log(666);
}, 1000);
setTimeout('console.log(666)'); // 相当于setTimeout('console.log(666)', 0);
setTimeout(function(a, b) {
console.log(a + b); // 3
}, 1000, 1, 2);
其中有两点要注意（具体原因可以看这篇文章）：
- 函数里面的this指向的是全局，因为赋值的是函数的地址，执行的时候是从任务队列取出来在主执行栈中全局调用。
var obj = {
y: function () {
console.log(this);
}
};
setTimeout(obj.y, 1000) // window
- 定时器设置的毫秒数是理想情况下多少毫秒后执行，但实际情况下是可能多于该毫秒数之后才执行。因为虽然数完秒就放到任务队列，但要等主执行栈为空了才会去调用这些任务队列的回调函数。
// 下面的虽然写了1s后执行输出666，但实际却要3s后才执行输出666
setTimeout('console.log(666)', 1000);
function execTime(t) {
var start = Date.now();
while(Date.now() - start < t) {}
}
execTime(3000);
2. setInterval
setInterval与setTimeout用法和注意点基本差不多，他主要用于设置时间间隔，每隔多少毫秒之后重复执行任务，直到浏览器关闭或手动清除。
实际上，两次函数执行的间隔时间也不是所设定的毫秒数，而是小于执行的毫秒数的，比如设置了100ms，第一次函数执行用了10ms，那么间隔90ms之后第二次执行函数；如果第一次函数执行用了110ms，那么函数执行完毕之后会立马执行第二次函数。那如果要固定间隔时间执行某函数，可以用setTimeout来模拟。
var timer = setTimeout(function f() {
// ...
timer = setTimeout(f, 2000);
}, 2000);
3. 清除定时器
setTimeout和setInterval生成的都是计数器编号，从0开始，将对应的编号传入clearTimeout和clearInterval就可以清除对应的定时器。
var a = 0;
var timer = setInterval(function() {
console.log(a++); // 输出0、1就停了
if (a===2) {
clearInterval(timer);
}
}, 1000);
当浏览器的标签页打开之后，每生成一个定时器都是从上一个编号开始累加上去的，第一个定时器编号是0，第二个是1，如此类推，所以清除所有的定时器可以这么实现。
var timer = setTimeout(function(){}, 0);
while(timer >= 0) {
clearTimeout(timer);
timer--;
}
二、节流和防抖
通过定时器，我们可以实现函数节流和函数防抖。
1. 函数节流
函数节流指的是在规定时间内重复触发不重复执行，以节流。如监听页面滚动到底的时候加载新的数据，但往往会连续触发滚动事件导致连续发起几次请求，此时就需要函数节流。
function throttle(fn, delay) {
var isFinished = true;
return function() {
if (!isFinished) return;
isFinished = false;
var that = this, args = arguments;
setTimeout(function() {
fn.apply(that, args);
isFinished = true;
}, delay);
};
}
document.onscroll = throttle(function() { /* 请求数据 */ }, 20);
正如上面的代码，函数节流主要是锁的思想。先执行一次，当上一个执行完毕才解锁isFinished = true，否则锁住isFinished = false代码不让执行。
2. 函数防抖
函数防抖指的是规定时间内重复触发只执行最后一次，以防止频繁触发带来的抖动。如输入框搜索时，如果每当输入框有一个字变化就搜索，一是对频繁请求对服务器压力大，二是前端也会频繁的闪现搜索的结果，用户体验不好。所以一般都会有个延时，等用户输入延迟一段时间后确定不再输入再进行搜索。
function debounce(fn, delay) {
var timer = null;
return function() {
clearTimeout(timer);
var that = this, args = arguments;
setTimeout(function() {
fn.apply(that, args);
}, delay);
};
}
document.querySelector('input').onchange = debounce(function() { /* 请求数据 */ }, 200);
函数防抖的主要思想是定时器清除。规定时间内再次触发，则上一个未被执行的定时器被清除，再开启新的定时器，直到最后一次触发。
上面写的是两个简单版本的函数节流和函数防抖，主要是为了讲解两者的主要思想，也好进行区分：
- 节流是先执行一次，然后过规定时间之后才能再执行。防抖是过了规定时间之后没再触发，最后执行一次。
- 节流是锁的思想，防抖是清除定时器的思想。
- 注意最后返回结果都是函数，而且要注意函数中的this指向是返回函数的this。
网友评论