vue-防抖封装

封装

// 防抖
  debounce(fn, delay = 100) {
    if (typeof fn !== 'function') return
    let time = null
    return (...args) => {
      clearTimeout(time)
      time = setTimeout(() => {
        fn.apply(this, args)
      }, delay)
    }
  },

使用:1、import引入文件,2、使用函数

import { debounce } from 'xxx'
data.resizeHandler = debounce(() => {
  // 具体操作
}, 100)
window.addEventListener('resize', data.resizeHandler)
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) } } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值