防抖与节流

一：含义

防抖：短时间内连续触发某个事件，会造成资源浪费，极大损耗性能，比如页面窗口尺寸变化，输入框时时搜索，点击按钮连续发请求等等，这时候可以用到防抖，防抖函数需满足两点要求

1.触发函数后，不立即做事，而是等待一段时间后去做事

2.如果在等待时间内再次触发了该函数，重新计时

节流：如果短时间内多次触发了同一事件，那么在函数执行一次后，在某个时间内不再执行，即只执行第一次，也就是说在一定时间内连续多次触发同一事件，事件只执行一次，

二：防抖节流相同点和区别

相同点：都是为了解决短时间内连续触发某个事件造成性能差的方法

不同的：防抖是是在最后一次触发事件后执行；节流是每经过一段设定时间就执行一次；比如防抖和节流设定时间都是500ms,那么1s中只能连续触发某个方法，防抖只执行一次，二节流执行了2次

三：防抖节流使用案例

1.html部分

<div class="container">
     <div id="left">
          <button onclick="addLeft()">添加（防抖）</button>
     </div>
     <div id="right">
          <button onclick="addRight()">添加（节流）</button>
     </div>
 </div>

2.css

.container {display: flex;width: 800px;}
#left,#right {flex: 1;margin-left: 50px;}
#left div,#right div {margin-top: 15px;}

3,向一个文本框中添加信息，用setTimeout模拟接口，为了避免重复请求，先用防抖实现如下

let left = document.getElementById('left')
let timer
const fun = ()=> {
    const div = document.createElement('div')
    div.innerText = '武汉欢迎你！！！'
    left.appendChild(div)
}
const addLeft = ()=> {
    timer && clearTimeout(timer)  // 如果timer存在，则清除定时器，重新开始计时
    timer = setTimeout(() => {
        fun()
    }, 1000);

}

4.使用节流方法实现如下

let right = document.getElementById('right')
let flag = true
const getApi = () => {
          setTimeout(() => {
               const div = document.createElement('div')
               div.innerText = '北京欢迎你！！！'
               right.appendChild(div)
               flag = true
          }, 1000)
}
const addRight = () => {
           if (flag) {
               flag = false
               getApi()
           }
}

效果如下

 可以看到，连续点击3s,防抖只添加了一次，节流添加了3次

四：使用场景

防抖：

1、window对象的onscroll、onresize

2、拖拽的mousemove

3、输入框时时搜索

4、防重复请求

节流：

1.监听滚动事件，比如是否滑到底部自动加载更多，用节流来处理

2.某些特定要求单位时间触发一次情况