美文网首页
lodash中的debounce和throttle

lodash中的debounce和throttle

作者: 小蜗牛的碎碎步 | 来源:发表于2021-09-22 14:25 被阅读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);
        }
    }
    

    相关文章

      网友评论

          本文标题:lodash中的debounce和throttle

          本文链接:https://www.haomeiwen.com/subject/aupjgltx.html