lodash中的debounce和throttle
2021-09-22 本文已影响0人
小蜗牛的碎碎步
- 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后再执行)
})
},
- 监听滚动条的滚动距离,右下角显示“回到顶部”按钮
解决方案:使用节流,指定时间段内只执行一次,避免在滚动时过分的更新定位
mounted() {
window.addEventListener('scroll', _.throttle(this.handleWindowScroll, 1000, {
leading: true,
}))
},
methods:{
handleWindowScroll() {
console.log('页面滚动:', document.documentElement.scrollTop);
}
}