防抖和节流

在 JavaScript中，防抖和节流其实是一个很重要的概念。主要应用场景就是会频繁触发的事件，比如监听滚动、点赞功能，总不能点一次赞就向后台发送一次数据，这时候就要用到防抖和节流。

防抖和节流的核心就是定时器，我们要知道定时器的一个概念，就是在定时之后，在没触发之前清除定时器，这个定时器方法不会被触发。

防抖函数的作用

防止抖动，单位时间内事件触发会被重置，避免事件被误伤触发多次。代码实现重在清零 clearTimeout。防抖可以比作等电梯，只要有一个人进来，就需要再等一会儿。业务场景有避免登录按钮多次点击的重复提交。

使用场景：
登录，发信息等按钮，避免用户点击太快多次请求
调整窗口的大小。resize操作过于频繁，造成计算过多，此时需要一次到位，用到防抖
文本编译器实时保存，当无任何更改操作一秒后进行自动保存

function  _debounce(fn){
	return function(){
	let timer =""
	if(timer)  clearTimeout(timer);
	timer = setTimeout(function () {
	            timer = null;
	            fn.apply(this, arguments);
	        }, 500);}

节流函数的作用

控制流量，单位时间内事件只能触发一次，与服务器端的限流 (Rate Limit) 类似。代码实现重在开锁关锁 timer=timeout; timer=null。节流可以比作过红绿灯，每等一个红灯时间就可以过一批。

使用场景：
scoll 事件，每隔一秒计算位置信息
浏览器播放事件，每一秒计算一次进度信息
input框实时搜索并发送请求展示下拉列表，每隔一秒发送一次请求

function throttle(fn) {
     let canRun = true; 
     return function () {
       if (!canRun) return; 
       canRun = false; 
       setTimeout(() => { 
         fn.apply(this, arguments);
         canRun = true;
       }, 500);
     };
   }