vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue函数防抖

一文教你如何一个Vue指令搞定函数防抖

作者:JYeontu

防抖(Debounce)在前端开发中是一种常用的技术,它的作用是限制某个操作在短时间内的频繁触发,下面我们就来看看如何一个Vue指令搞定函数防抖吧

说在前面

防抖(Debounce)在前端开发中是一种常用的技术,它的作用是限制某个操作在短时间内的频繁触发,只有在一定的间隔时间内才执行相应的操作。

什么是防抖

函数防抖 方法是一个函数,它的执行被延迟了 t 毫秒,如果在这个时间窗口内再次调用它,它的执行将被取消。你编写的防抖函数也应该接收传递的参数。

例如,假设 t = 50ms ,函数分别在 30ms 、 60ms 和 100ms 时调用。前两个函数调用将被取消,第三个函数调用将在 150ms 执行。如果改为 t = 35ms ,则第一个调用将被取消,第二个调用将在 95ms 执行,第三个调用将在 135ms 执行。

效果展示

实现原理

防抖函数实现步骤

基本的防抖函数示例

function debounce(func, delay) {
  let timer;

  return function() {
    const context = this;
    const args = arguments;

    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(context, args);
    }, delay);
  };
}

// 创建一个防抖函数
const debouncedFunction = debounce(() => {
  console.log('Debounced function is executed');
}, 300); // 设置延迟时间为300毫秒

// 在需要防抖的事件中调用防抖函数
window.addEventListener('scroll', debouncedFunction);

这种基础的写法应该大部分同学都可以很轻松的写出来,这里就不过多赘述了,主要看下怎么将其封装成一个vue指令来使用。

封装成vue指令

指令代码

export default {
    inserted: function (el, binding) {
        const arg = binding.arg || 500;
        let timer;
        el.addEventListener("input", (e) => {
            clearTimeout(timer);
            timer = setTimeout(() => {
                binding.value(e);
            }, arg); // 设置延迟时间,单位为毫秒
        });
    },
};

这段代码定义了一个自定义指令对象,其中的 inserted 方法会在指令绑定到元素上时被调用。在这里,我们将该指令绑定到输入框上。

当输入框触发输入事件(input)时,会执行回调函数。在回调函数中,通过 clearTimeout 清除之前的定时器,并重新设置一个新的定时器。这样做的目的是确保在用户连续输入时只有最后一次输入的内容被处理。

在新的定时器中,会等待一段时间(由 arg 参数指定,单位为毫秒),然后执行 binding.value(e),也就是调用传入指令的值的函数并传递事件对象 e。这样就实现了在输入框输入时应用防抖函数的效果。

指令使用

<input
    v-JDebounce:1000="handleInput"
    class="input-content"
/>

methods: {
    handleInput(event) {
        const value = event.target.value;
        if (value === "") {
            this.inputContent = "";
            return;
        }
        this.inputContent += `\n输入了:${value}`;
    },
}

组件库

组件文档

目前该组件也已经收录到我的组件库,组件文档地址如下: jyeontu.xyz/jvuewheel/#/JDebounceView

组件内容

组件库中还有许多好玩有趣的组件,如:

等等……

组件库源码

组件库已开源到gitee,有兴趣的也可以到这里看看:gitee.com/zheng_yongtao/jyeontu-component-warehouse

到此这篇关于一文教你如何一个Vue指令搞定函数防抖的文章就介绍到这了,更多相关Vue函数防抖内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文