js防抖与节流

什么是防抖和节流

防抖：对于频繁的操作，只让最后一次操作生效
节流：对于频繁的的操作，限制在特定的时间里只触发一次

防抖

防抖的原理其实很简单，比如我们频繁点击一个按钮，点击按钮会触发一个事件，比如：

<!--html-->
<button id="but">点我</button>

// js
function doSomeThing() {
	console.log('做点什么');
}
document.querySelector('#but').onclick = doSomeThing()

这样写我们如果点击按钮，点一次就会打印一次，如果说doSomeThing方法里面是一个提交请求，那就会点一次发送一次请求，这显然不是我们想要的效果
那我们把代码优化一下，这里就用到了setTimeout定时器

// js
let timer = null;
function doSomeThing() {
    clearTimeout(timer );
    timer = setTimeout(() => {
        console.log('做点什么');
    }, 1000)
}
document.querySelector('#but').onclick = doSomeThing()

这样其实就已经实现了一个简单的防抖
思路：
1.定义一个定时器
2.在每次触发事件之时首先清除定时器
3.创建定时器，将要做的事情写入定时器函数里面
这样在事件触发间隔没超过我们设定的时间的时候，定时器就会被清除，如果间隔时间超过了我们设置的时间，事件就会被执行，这就叫防抖。

但是我们如果在项目中大量出现防抖操作，那这样写会不会赶紧比较麻烦，而且不够高级，那我们是不是应该想把防抖封装成一个函数，那我们用起来就比较方便了，那接下来我们就来看看如果封装一个防抖函数：

// 防抖函数
function debounce(callBack, delay = 200) {
    let timer = null; // 定时器
    return function () {
        clearTimeout(timer); // 清除上一个定时器
        timer = setTimeout(() => {
            callBack.apply(this, arguments);
        }, delay);
    };
}
function doSomeThing(e) {
    console.log(this);
    console.log(e);
    console.log('做点什么');
}
document.querySelector('#but').onclick = debounce(doSomeThing, 1000);

以上就是一个防抖函数的封装，这里我们用到了apply()来修正了this的指向，并且用到了arguments来修正了event指向问题，关于apply()和arguments概念我们这里就不说了。

节流

概念：对于频繁的的操作，限制在特定的时间里只触发一次
下面就是一个节流的例子，假设我们快速地重复点击一个id为btn的按钮

let flag = true; //节流开关
function doSomeThing() {
    if (flag) {// 当开关打开的时候，才执行
        flag = false;// 进入以后立即关闭开关
        console.log('做点什么');
        setTimeout(() => {//内容执行完之后开启定时器
            flag = true;//在设定的时间后重新打开定时器
        }, 3000)//3秒内最多执行一次
    }
}
document.querySelector('#btn').onclick = doSomeThing

那我们再来看一下节流函数如何封装：

// 节流函数
function throttle(callBack, delay = 100) {
    let timer = null// 定时器
    return function () {
    	//这里我们就省略了节流开关，以timer来代替，当timer存在时，说明有一个timer正在执行，不需要执行下一个，所以这里就直接return
        if (timer) return
        timer = setTimeout(() => {
            callBack.apply(this, arguments)
            timer = null//事件执行后，重新将timer设置为null，下一次周期就可以继续执行
        }, delay);
    }
}
function doSomeThing() {
    console.log('做点什么');
}
document.querySelector('#btn').onclick = throttle(doSomeThing, 1000)

另外推荐一个防抖和节流的插件
安装

npm install throttle-debounce --save

引用

import { debounce,throttle } from ‘throttle-debounce’;

防抖-debounce

/**
 * 去抖(限制函数的执行频率)
 * @param [Number] delay 延迟时间
 * @param [Boolean] atBegin 是否立即执行
 * @param [Function] callback 回调函数
 */
debounce(delay, atBegin, callback)

节流-throttle

/**
 * 节流(限制函数的执行频率)
 * @param [Number] delay 频率时间
 * @param [Boolean] noTrailing 最后一次是否执行callback，true不执行，false执行
 * @param [Function] callback 回调函数
 * @param [Boolean] debounceMode 是否立即执行
 */
throttle(delay, noTrailing, callback, debounceMode)