防抖和截流是什么神仙？

防抖：

用户在频繁操作时（在一定时间内），只有最后一次操作时才会触发事件。比如，滑动只有在停止滑动后事件才会触发，否则滑动事件一直被触发。再比如重复点击，也只让最后一次点击事件生效。（怎么判断是最后一次操作，比如停止滑动？——设置事件间隔，在超过时间间隔就视为最后一次操作/停止操作）
直接使用：

var btn = document.getElementById(“demo”)
let timer
btn.onclick=()=>{
clearTimeout(timer)
timer= setTimeout(()=>{
// do sothings
alert(‘haha~重复点击是没有用的！’)
},1000)
}

封装成防抖函数：

function debounce (fn, delay) {
            var timeout
            return () => {
                clearTimeout(timeout)
                timeout = setTimeout(fn, delay)
            }
        }

var btn = document.getElementById("btn")
        function fn1() {
            alert('haha~重复点击是没有用的！')

        }
btn.onclick = debounce(fn1,1000)

节流

在事件触发一次后，在一定时间内不让事件重复触发，也就是在规定时间内，无论你操作几次，到点我才会触发。(另种思路：设置时间段=当前时间-最后操作操作的时间，当时间大于设置的时间我才会被触发)

方法一：——设置固定时间内只发生一次

function throttle(fn,wait){
            let timeout
            return ()=>{
                const context = this
                const args = arguments
                if(!timeout){ 
                 // timeout一开始!timeout为true，所以会执行，再次点击或多次点击时，time在一定时间内（wait值）才会再一次被置为null，之后 if(!timeout)再会被执行
                    timeout = setTimeout(()=>{
                       timeout = null
                       fn.call(context,args) 
                    },wait)
                }
            }
        }
btn.onclick = throttle(fn,1000)

方法二：设置时间戳

function throttle(fn, delay) {
    // 记录上一次函数触发的时间
   let lastTime = 0;
   return()=>{      
       // 记录当前函数触发的时间
      let nowTime = Date.now()
      if (nowTime - lastTime > delay) {
           fn.call(this)  // 指定this指向
           // 重置时间
           lastTime = nowTime
      }   
  }   
}

总结：
同：
防抖和截流都起到了让某个函数不会被任意的、随时触发；
区别：
防抖是在重复操作（比如持续点击）的时候，点击一次就清除一次定时器，然后又加上定时器，只有最后一次操作，才会执行上一次添加的定时器的回调函数；
截流是在定时器回调函数中清除定时器，也就是，在定时器时间内，你进行多少次都与我无关，只有在定时器时间到了我才会再重新启动计时器，因此定时器的回调函数也就不会因为你的重复操作而频发被触发。——设置定时器的思路
设置时间戳的截流方式，是根据上一次和本次操作的时间差来确定是否触事件。-——置时间戳的思路