vue处理防抖与节流

应用案例:表单快速点击保存按钮的时候,会不断的快速调用保存接口,生成多条数据。

处理方式之一:

<script>
import _ from 'lodash'
</script>

methods: {
    // 节流处理
    handleConfirm: _.debounce(function() {
      this.submit()
     }, 1000, {
        'leading': true,
        'trailing': false
    })

    submit() {
      // 调用保存接口逻辑
    }
}

  • 7
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue中,可以通过封装防抖节流函数来优化页面性能和用户体验。防抖节流都是为了限制函数的执行频率,避免频繁触发函数而导致性能问题。 1. 防抖(Debounce):在指定的时间间隔内,如果事件持续触发,则重新计时,直到事件停止触发后才执行函数。常用于输入框搜索、窗口调整等场景。 下面是一个通过Vue封装防抖函数的示例: ```javascript // 防抖函数 function debounce(func, delay) { let timer = null; return function() { clearTimeout(timer); timer = setTimeout(() => { func.apply(this, arguments); }, delay); }; } // Vue组件中使用防抖函数 export default { data() { return { inputValue: '' }; }, methods: { handleInput: debounce(function() { // 处理输入事件 // ... }, 300) } } ``` 2. 节流(Throttle):在指定的时间间隔内,只执行一次函数。常用于滚动加载、按钮点击等场景。 下面是一个通过Vue封装节流函数的示例: ```javascript // 节流函数 function throttle(func, delay) { let timer = null; return function() { if (!timer) { timer = setTimeout(() => { func.apply(this, arguments); timer = null; }, delay); } }; } // Vue组件中使用节流函数 export default { data() { return { scrollPosition: 0 }; }, mounted() { window.addEventListener('scroll', this.handleScroll); }, beforeDestroy() { window.removeEventListener('scroll', this.handleScroll); }, methods: { handleScroll: throttle(function() { // 处理滚动事件 // ... }, 300) } } ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值