防抖和节流

1. 防抖和节流的区别？

防抖：触发高频事件后n 秒内 函数只会执行一次，如果n秒内 高频事件在在次触发，则会重新计算

节流：高频事件触发，但在n 秒内 只会执行一次，所以节流会稀释函数的执行频率

下面就是代码相关的显示：

防抖代码：

适用场景：

1. 登录、发送短信等按钮避免用护点击过快，以至于发送了多次请求，需要防抖

2. 调整浏览器窗口大小时，resize 次数过于频繁，造成计算过多，此时需要一次 到位，就用到了防抖，

3. 文本编辑器事实保存，当前无任何操作一秒后进行保存

防抖原理代码如下：

1.定义一个函数，里面分别会传入两个参数：参数1:处理的函数，参数2:等待时间
2.定义一个外部局部变量
3.返回一个函数（这个函数实际是一个闭包）
4.判断这个任务是否存在，如果有就把之前的取消掉
5.然后创建一个新的任务，在里面去执行这个函数(记住改变this,如果不改变会出现作用域的一个情况)

  var square=document.querySelector(".square")function debounce(fn,wait){ //参数1： 处理函数，参数2:等待时间//1.定义一个变量let timeout;return function(){ //定义一个返回的函数：闭包
//2.如果这个定时任务存在,就把这个定时任务取消掉，
if(timeout) clearTimeout(timeout)//取消之前的无效任务：大概的意思是判断有没有这个任务的存在，那我就把之前的任务给去掉//3.然后重新创建一个任务,然后在这个里面去执行这个函数timeout=setTimeout(()=>{fn.apply(this);},wait)}
}
//使用:假如我们这里调用的是事件
search.onkeyup=debounce(count,2000)//闭包，这个return 返回函数才是我们正真的结果

节流代码如下：

使用场景：

1. scroll 事件，每隔一秒计算一次位置信息等

2. input 框 事实搜索 并发送请求展示下拉列表，每隔一秒发送一次请求

节流原理代码如下：

1.判断有没有定时任务，如果定时任务不存在，就要创建一个定时任务
2.创建任务之后，在清除任务，在执行任务

function throttle(fn,wait){
let timeout;
return function(){
//判断如果没有定时任务,定时任务不存在，就要创建一个定时任务
if(!timeout){ 
timeout=setTimeout(()=>{
//清除任务
timeout=null;
fn()
},wait)
}
}
}
search.onkeyup=throttle(count,2000)//闭包，这个return 返回函数才是我们正真的结果