linux添加定时器防抖,JavaScript浅析 -- 定时器和节流防抖

一、定时器

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。