防抖与节流

防抖

• 防抖：触发多次事件后，只会执行最后一次代码，节省多次执行损耗，先上代码

const debounce = (f,delay) => {
  let timer = null;
  return () => {
    clearTimeout( timer );
    timer = setTimeout( () => {
        f();
    } ,delay )
  } 
}

如代码所示：运用闭包的模式实现防抖，当我们频繁的点击一个按钮或者触发一个事件的时候，可以先封装一个防抖函数，f变量就是传入的要执行的事件函数，当我们在delay时间内多次触发同一个事件，每一次进入都会清空timer的定时器，并且重新执行setTimeout，所以当我们在同一时间进入，会不断清空之前的定时器，最后只执行最后一次setTimeout。

防抖实际中常用的例子：

• 搜索的联想词（ 用户在不断输入值时，在短时间内会不断触发oninput事件，oninput会向后端拿去搜索结果，这样很耗费网络资源，用防抖来实现，在delay时间内，只有最后一次事件才会触发，这样可以控制delay为1秒钟，那样只有当用户停止输入事件超过1秒，才会去调用网络请求，用防抖来节约请求资源 ）
• window实现resize的时候，不断的调整浏览器窗口大小会不断的触发这个同样的事件，用防抖来让其只触发一次（提高用户体验）

节流

• 节流：高频事件触发后，规定时间内内只会执行一次，节流会稀释函数的执行频率,同样先上代码

const throttle = (func,delay) => {
    let timer = true;
    return () => {
       if( !timer ) return;
       timer = false;
       setTimeout( () => {
           func();
           timer = true;
       },delay)
    }
}

如代码所示：节流通过timer一开始变量为true控制，当timer为true，就不会跳出函数，执行下面的timer = false，然后开启一个定时器setTimeout，当setTimeout还没开始执行的时候，连续触发节流事件，timer的状态因为闭包的原因，只要还没执行setTimeout，就会一直是false状态，此时，他会在if( !timer ) return;中跳出函数，不会再开启新的定时器，所以节流实在一定时间内只执行一次，当上一次执行没结束时，不会触发下一次的事件。

节流的实际应用：

• 当需要提交表单数据的时候，可能会手快点击了两次提交按钮，这样会发送两次数据请求，如果后端没做校验的话，会存到两条相同的数据，这时候节流就可以防止同一时间内多次触发提交表单导致的问题
• 当移动端或者小程序端，监听是否到达底部事件，当我们用户多次上下滑动，到达底部事件就会不断触发，我们到达底部多数是请求数据，从后端拿到数据再返回，但是可能网络延迟，数据还没渲染，用户已经多次触发底部事件，这样会导致多次数据请求，如果前端拿到数据后只是单纯的push进列表，会导致多个请求回来的数据一样，push进去相同的数据，这时候可以用节流来防止请求还没回来的时候，又发送一次相同请求导致的数据问题或者浪费网络资源的问题

区别

防抖与节流的区别可以看出，防抖是可以不断触发，但是下一次事件会不断覆盖上一次的setTimeout，只到只会触发最后一次触发的事件。而节流是，点击了第一次事件后，就会在事件中加上一个锁，在一定时间内只会等到上一次事件执行完，才能继续触发下一次事件。

区别：防抖动是将多次执行变为最后一次执行，节流是将多次执行变成每隔一段时间执行。

文章仅个人理解，如果有意义可以留言提出