【方法封装】节流

节流的核心

持续触发某事件,在特定的时间间隔内,只执行一次;我一般多用于滚动事件,例:吸顶

方法封装

const throttle = function (fn, delay, mustRunDelay) {
  var timer = null; // 初始化
  var t_start;
  return function () {
    var context = this, // 当前作用域的this
        args = arguments, // 函数的所有参数
        t_curr = +new Date(); // 事件触发时间
    clearTimeout(timer); // 清除计时器

    if (!t_start) { 
      t_start = t_curr;
    }

    if (t_curr - t_start >= mustRunDelay) {
      // 正常范围内触发事件 调用函数
      fn.apply(context, args);
      t_start = t_curr;
    } else {
    // 事件触发频繁,延迟执行
      timer = setTimeout(function () {
        fn.apply(context, args);
      }, delay);
    }
  };
};
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
当使用Vue开发应用时,我们有时需要对一些频繁触发的事件进行节流操作,以减少资源的浪费。下面是一个封装节流的代码示例: ```javascript // throttle.js export default function throttle(fn, delay) { let timer = null; return function(...args) { if (!timer) { timer = setTimeout(() => { fn.apply(this, args); timer = null; }, delay); } }; } ``` 上述代码是一个简单的节流函数封装,接受两个参数:要执行的函数 `fn` 和延迟时间 `delay`。它返回一个新的函数,该函数在延迟时间内只会执行一次 `fn`。 接下来,我们可以在Vue组件中使用这个节流函数。假设我们有一个搜索框组件,需要对用户输入进行节流处理: ```vue <template> <div> <input type="text" v-model="keyword" @input="handleSearch" /> </div> </template> <script> import throttle from './throttle'; export default { data() { return { keyword: '', }; }, methods: { handleSearch: throttle(function() { // 在这里执行搜索逻辑 console.log('搜索:', this.keyword); }, 500), }, }; </script> ``` 在上述代码中,我们引入了之前封装节流函数 `throttle`,并将其作为 `handleSearch` 方法的包装函数。这样,当用户输入时,`handleSearch` 方法将在延迟时间内只执行一次,避免了频繁的搜索操作。 这就是一个简单的Vue节流函数封装示例。通过封装节流函数,我们可以在需要的地方方便地使用节流操作,提高应用的性能和用户体验。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值