防抖函数和节流函数使用及应用场景

一、防抖
性能优化方案，防抖用于减少函数请求次数，对于频繁的请求，只执行这些请求的最后一次。
基础版本

function debounce(func, wait = 300){
  let timer = null;
  return function(){
    if(timer !== null){
      clearTimeout(timer);
    }
    timer = setTimeout(fn,wait);
  }
}

使用

debounce(function(e){
  console.log(e)
}, 500)

应用场景：
（1）、search搜索联想，用户在不断输入值时，用防抖来节约请求资源。
（2）、window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次

2、节流函数
性能优化方案，节流用于减少函数请求次数，与防抖不同，节流是在一段时间执行一次。

function throttle(func, delay){
  let timer = null
  return function(...arg){
    if(!timer){
      timer = setTimeout(()=>{
        func.apply(this, arg)
        timer = null
      }, delay)
    }
  }
}

使用

throttle(function(e){
  console.log(e)
}, 500)

应用场景：
（1）、鼠标不断点击触发，mousedown(单位时间内只触发一次)
（2）、监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断