JS高频面试题-节流和防抖

一、防抖

1、防抖的原理：

当事件（如onscroll）触发后，用户可能不停的触发该事件，以最后一次触发该事件开始计算执行时间（如300ms），执行时间到后才去执行相应的回调函数。用一个线段如下图来表示：在A点第一次触发事件onscroll，开始计算执行时间；在B点再次触发事件，该点还在300ms内，重新计算执行时间；在C点再次触发事件，该点在第2个300ms以内，重新计算执行时间，到D点，第3个300ms执行时间已到，才执行回调函数。

---

2、防抖的应用场景：

1、滚动条scroll事件滚动，当滚动条停止滚动一段时间后才开始计算是否到达页面底部，再执行加载操作等回调函数。

2、搜索框输入查询（输入完后再发送ajax请求）

3、表单验证（表单输入完后再进行验证）

4、按钮提交事件（如果用户不停点击按钮，以最后一次点击为准）

5、浏览器窗口缩放，resize事件，当用户不再缩放窗口一段时间后，才去调用回调函数。

3、手写防抖代码：

function debounce(fn,wait){
     let timeout = null
     return function(...args){ //闭包，返回的函数暂且称为returnFunc
     if(timeout){
        clearTimeout(timeout)
     }
        timeout = setTimeout(()=>{
        //调用fn函数，并修改this指针为container而不是window，args是调用returnFunc时传递的参数
            fn.apply(this,args) 
            },wait)
         }
        }

let count = 0
const container = document.querySelector('.content')
function callbackFunc(){
    container.innerHTML = count++
  }
//这里onmousemove事件触发后，会调debounce函数返回的函数returnFunc，onmousemove事件触发后浏览器会创建并传递一个event参数，returnFunc也会接收到这个event参数
container.onmousemove = debounce(callbackFunc,2000) 

二、节流

1、节流的原理

节流是某个事件触发后，每隔一段时间才处理一次。如：当事件（如onscroll）触发后，用户可能不停的触发该事件，每隔一段时间才执行相应的回调函数。

正如上图所示，假如事件间隔是10s，在A点，也就是起点时，开始触发事件，默认调回调函数做出响应，在0-10s期间一直在触发事件，但该期间没有调回调函数，到第10s时间间隔到了才做出一次响应，10-20s区间一样也是一直触发事件但不做出响应，到20s做出一次响应。在D点（位于20-30s之间）停止触发事件，没有到时间间隔，默认不再调回调函数。

2、节流的应用场景

1、DOM元素的拖拽，比如隔一段时间，输出当前DOM元素的坐标

2、计算鼠标移动的距离，鼠标移动时，每隔一段时间鼠标移动的距离；

3、监听scroll滚动，滚动一段时间会请求数据等。

3、手写防抖函数

//这里只实现了开始时是否响应的情况（默认开始响应），尾部是否响应的情况没有实现（默认尾部不响应）
  function throttle(func, limit,{leading = true,trailing = false} = {}) {
      let startTime = 0
      return function(){
           let nowTime = new Date().getTime()
           if(!leading && startTime === 0) { //这里确保是第一次进来
              //当leading是false时，也就是不需要首次进来时执行回调函数，这是将startTime赋值成nowTime就会导致limit - (nowTime - startTime) >0 而不会执行func函数
                startTime = nowTime 
           }
           if(limit - (nowTime - startTime) <= 0){ //到了间隔时间，要开始执行函数
              func.apply(this,arguments)
              startTime = nowTime
            }
          }
        }
 let count = 0
 const container = document.querySelector('.content')
 function callbackFunc(){
    container.innerHTML = count++
 }
 container.onmousemove = throttle(callbackFunc,2000)

三、总结

防抖和节流的原理不同，导致其应用场景也不同，大家根据自身的需求来选择防抖还是节流来实现。