lodash中的debounce和throttle

2021-09-22  本文已影响0人  小蜗牛的碎碎步
  1. input输入调用接口,实时搜索
    解决方案:使用防抖,用户停止输入指定时间后执行搜索函数
 <Input
            iconType="search"
            :width="260"
            v-model="searchValue"
            @pressEnter="handleSearchEnter"
            @clear="handleSearchEnter"
            @input="handleSearchInput" // 绑定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);
    }
}
上一篇下一篇

猜你喜欢

热点阅读