lodash中的debounce和throttle

  1. input输入调用接口,实时搜索
    解决方案:使用防抖,用户停止输入指定时间后执行搜索函数
 
 mounted() {
    // 在mounted中指定防抖函数
    this.handleSearchInput = _.throttle(this.queryList, 1000, {
      leading: true,// 先执行后等待(输入后立即执行)
      trailing: false,// 先等待后执行(如果为true,需等待1000ms后再执行)
    })
  },
  1. 监听滚动条的滚动距离,右下角显示“回到顶部”按钮
    解决方案:使用节流,指定时间段内只执行一次,避免在滚动时过分的更新定位
mounted() {
    window.addEventListener('scroll', _.throttle(this.handleWindowScroll, 1000, {
      leading: true,
    }))
  },
 methods:{
   handleWindowScroll() {
      console.log('页面滚动:', document.documentElement.scrollTop);
    }
}

你可能感兴趣的:(lodash中的debounce和throttle)