防抖和节流

-简单-通俗-不说官方话

防抖和节流是常见的性能优化函数。

首先介绍一下防抖和节流的常见应用场景，对这两个名词有一个大致的了解：

常见应用场景

防抖：

1、搜索框，用户不断地输入内容，需要用户输入完毕，采取执行一次搜索功能

2、浏览器视图的放大缩小，要等待用户结束鼠标滚动操作之后执行，而不是不间断的跟着鼠标滚轮一直执行触发的resize函数（若是希望每滚动一小段时间就执行resize函数一次就是节流咯~）

节流：

1、按钮操作，用户反复点击按钮想要触发按钮事件，应该在第一次点击按钮的时候就触发该事件，该事件函数执行完毕之后，后续的点击操作才能生效。

2、监听滚动事件，比如是否滑到底部自动加载更多，而不是用户一直持续滚动鼠标，不执行加载事件，还等待用户停止滑动鼠标在执行加载事件

防抖和节流的区别

防抖：连续多次触发同一事件，仅在最后一次触发且停止该触发操作超过定时器预定时间的情况下才执行相关函数。但是一直连续触发会导致一直不执行相关函数。

可以理解为用户连续操作结束后才会执行事件函数。

节流：连续多次触发同一事件时，第一次触发会立即生效，但是后续操作仅在上一次操作执行的函数结束后（或者第一次操作触发后隔一段时间）的再次触发操作才生效。

可以理解为稀释用户的触发操作。

防抖和节流的相同点

目的是为了阻止操作高频触发，从而浪费性能

实现方式：

防抖：

设定一个计时器，触发时计时器开始计时，计时器到时间就执行触发事件函数；如果计时器未结束就再次触发了该操作，那么清空上次设定的计时器，重新计时。

等用户高频事件完了（最后一次操作结束时间距离下次操作时间超过计时器定时），再进行事件操作。

function debouce(func,delay){
    let timeout = null;
    return function(){
        clearTimeout (timeout);
        timeout = setTimeout(func,delay);
    }
}

节流：

事件被触发之后，执行该事件函数，同时关闭阀门，拒接再次触发。当该事件函数执行结束之后，打开阀门，接受继续触发操作。

function throttle1(fn, delay){
	let flag = true;    //打开阀门
	return function(){
		if(flag) { 
			setTimeout(()=> {
				fn.apply(this, arguments);
				flag = true;//打开阀门
			}, delay)
			flag = false;//关闭阀门
		}
	}
}