vue节流和防抖的实现

防抖 场景

search搜索时，用户在不断输入值时，用防抖来节约请求资源。

输入框动态搜索  @change='handleSearch'

async getList(val) {
  let param;
  if (val && val !== undefined) {
    param = {
        parameter: val
    }
  }
  const { data } = await getLists(param)
  this.list = data
},

handleSearch(val) {
    clearTimeout(this.timer); // 清除之前的定时器
    this.timer = setTimeout(() => {
        this.getList(val);
    }, 300); // 等待一段时间后执行搜索操作
}

节流 场景

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

@click = "getList"
  
<script>
// 节流方法
  throttle(fn, time) {
    let temp = false;
    return function () {
      if (temp) {
        return;
      } else {
        temp = true; 
        setTimeout(() => {
          fn.apply(this, arguments);
          temp = false;
        }, time);
      }
    };
  }，
  getList(e) {
    // 疯狂触发点击事件
    throttle(getlists, 2000)
  },
  getlists(){
    const res = getlists().then((res)=>{
      console.log(res,'res')
    })
  }
</script>