13、防抖和节流

1 函数防抖和节流
函数防抖和节流是优化高频率执行js代码的一种手段，js中的一些事件如浏览器的resize、scroll，鼠标的mousemove、mouseover，input输入框的keypress等事件在触发时，会不断地调用绑定在事件上的回调函数，极大地浪费资源，降低前端性能。为了优化体验，需要对这类事件进行调用次数的限制。

在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。

代码：

function debounce(fn, delay) {
    let timer; // 维护一个 timer
    return function () {
        // let _this = this; // 取debounce执行作用域的this
        let args = arguments;
        if (timer) {
            clearTimeout(timer);
        }
        // timer = setTimeout(function () {
        //     fn.apply(_this, args); // 用apply指向调用debounce的对象，相当于_this.fn(args);
        // }, delay);
        timer = setTimeout(()=> {
            fn.apply(this, args); // 用apply指向调用debounce的对象，相当于this.fn(args);
        }, delay);
    };
}

测试用例：

// test
function testDebounce(e, content) {
    console.log(e, content);
}
var testDebounceFn = debounce(testDebounce, 1000); // 防抖函数
document.onmousemove = function (e) {
    testDebounceFn(e, 'debounce'); // 给防抖函数传参
}

2、节流函数

每隔一段时间，只执行一次函数。

时间戳执行，不顾头顾尾

function throttle(fnnc, wait) {
    let context,args;
    let old = 0;
    return function () {
    	context = this
        args = arguments
        let now = new Date().valueOf()
        if(now - old > wait){
        	func.apply(context,args)
        	old = now
    }
}

定时器执行
顾头不顾尾

function throttle(fnnc, wait) {
    let context,args;
    let timeout = null // 声明定时器变量
    let old = 0;
    return function () {
    	context = this
        args = arguments
        if(!timeout){
 			timeout = setTimeout(() => {
				timeout = null
				func.apply(context,args)
			},wait)
		}
    }
}

函数防抖与节流的比较
相同点：
都可以通过使用 setTimeout 实现。
目的都是，降低回调执行频率。节省计算资源。
不同点：
函数防抖，在一段连续操作结束后，处理回调，利用clearTimeout 和 setTimeout实现。函数节流，在一段连续操作中，每一段时间只执行一次，频率较高的事件中使用来提高性能。
函数防抖关注一定时间连续触发的事件只在最后执行一次，而函数节流侧重于一段时间内只执行一次。

应用场景
1.4.1 函数防抖的应用场景
连续的事件，只需触发一次回调的场景有：
搜索框搜索输入。只需用户最后一次输入完，再发送请求
手机号、邮箱验证输入检测
窗口大小Resize。只需窗口调整完成后，计算窗口大小。防止重复渲染。
1.4.2 函数节流的应用场景
间隔一段时间执行一次回调的场景有：
滚动加载，加载更多或滚到底部监听
谷歌搜索框，搜索联想功能
高频点击提交，表单重复提交