什么是防抖和节流？有什么区别？如何实现？

概念：

本质上是优化高频率执行代码的一种手段

相同点:

• 都是为了应对事件持续频繁触发，不断发送请求，造成前端性能下降或对后端服务器造成的压力

不同点:

• 节流会不断触发，而防抖仅在最后一次触发

假设：都设置时间频率为500ms，在2秒时间内，频繁触发函数，节流，每隔 500ms 就执行⼀次。防抖，则不管调动多少次⽅法，在2s后，只会执行⼀次

应用场景

防抖：

• 搜索框搜索输入。只需用户最后⼀次输入完，再发送请求
• 手机号、邮箱验证输入检测

节流：

• 窗口大小 resize 。只需窗口调整完成后，计算窗口大小。防止重复渲染。
• 滚动加载，加载更多或滚到底部监听

实现

可以利用时间戳或定时器的方式
防抖：定时器
节流：定时器或时间戳都可以

• 防抖：
  定时器方式

 let box=document.querySelector('.box')
 let i=1;
 box.innerHTML=i;

事件对象.addEventListener('事件类型',debounce(moveFn),false)

   function moveFn() {
        this.innerHTML=++i
   }

    //通过防抖实现优化
    function debounce(fn,time=1000) {
        let timer=null;
        return function() {
            let _this=this
            let args=arguments
            clearTimeout(timer)
            timer=setTimeout(function() {
                fn.apply(_this,args)
            },time)
        }
    }

• 节流
  1.定时器方式

let box=document.querySelector('.box')
    let i=1;
    box.innerHTML=i;
    box.addEventListener('mousemove',throttle(moveFn,2000),false)
    function moveFn(e) {
        this.innerHTML=++i
    }
    //实现节流-定时器
    function throttle(fn,time) {
        let timer=null;
        return function() {
            let _this=this
            let args=arguments
            if(!timer) {
                timer=setTimeout(function() {
                    timer=null
                    fn.apply(_this,args)
                },time)
            }
        }
    }

2.事件戳方式

let box=document.querySelector('.box')
    let i=1;
    box.innerHTML=i;
    box.addEventListener('mousemove',throttle(moveFn,5000),false)
    function moveFn(e) {
        this.innerHTML=++i
    }
    //实现节流-时间戳版本  
    //思路：用现在时间减去上一次的时间>=time,就调用！
    function throttle(fn,time=1000) {
        //上一次的时间
        let previus=0
        return function() {
            let _this=this;
            let args=arguments
            //生成当前时间
            let now=+new Date()
            if(now-previus>=time) {
                fn.apply(_this,args)
                previus=now
            }
        }
    }