Vue开始封装全局防抖和节流函数

发布时间:2024年01月24日

封装文件

封装文件的实现思路如下:

  • 首先,我们需要定义两个函数:防抖函数和节流函数。这两个函数的目的是为了减少频繁触发某个事件导致的性能问题;
  • 防抖函数的实现思路是创建一个计时器变量,用于延迟执行函数。当触发事件时,首先清空之前的计时器,然后创建一个新的计时器来延时执行函数。如果在延时期间再次触发事件,会清空之前的计时器并重新创建计时器;
  • 节流函数的实现思路是创建一个计时器变量,用于限制函数的调用频率。当触发事件时,如果计时器变量不存在,则立即执行函数,并创建一个计时器,在指定时间后重置计时器变量。如果在计时器未过期期间再次触发事件,则无效,不会再次执行函数;
  • 在函数内部使用闭包,可以保存变量的状态,使得每次触发事件时都能访问到正确的变量值;
  • 最后,通过 export 语句将防抖函数和节流函数导出,以便在其他地方使用。

封装文件的目的是将防抖和节流的逻辑封装在一个独立的文件中,方便在不同的项目中复用,并使代码更加可读和可维护。

dbucTrtl.js

// 防抖函数
function debounce(func, wait, immediate) {
    let timeout; // 定义一个计时器变量,用于延迟执行函数
    return function (...args) { // 返回一个包装后的函数
        const context = this; // 保存函数执行上下文对象
        const later = function () { // 定义延迟执行的函数
            timeout = null; // 清空计时器变量
            if (!immediate) func.apply(context, args); // 若非立即执行,则调用待防抖函数
        };
        const callNow = immediate && !timeout; // 是否立即调用函数的条件
        clearTimeout(timeout); // 清空计时器
        timeout = setTimeout(later, wait); // 创建新的计时器,延迟执行函数
        if (callNow) func.apply(context, args); // 如果满足立即调用条件,则立即执行函数
    };
}

// 节流函数
function throttle(func, wait) {
    let timeout; // 定义一个计时器变量,用于限制函数调用频率
    return function (...args) { // 返回一个包装后的函数
        const context = this; // 保存函数执行上下文对象
        if (!timeout) { // 如果计时器不存在
            func.apply(context, args); // 执行函数
            timeout = setTimeout(() => {
                timeout = null; // 清空计时器变量
            }, wait); // 创建计时器,在指定时间后重置计时器变量
        }
    };
}

export {
    debounce,
    throttle
}; // 导出防抖函数和节流函数

全局引入

main.js

// 引入防抖节流函数文件
import { debounce, throttle } from './utils/dbucTrtl.js';
// 在Vue实例上扩展全局方法
Vue.prototype.$debounce = debounce;
Vue.prototype.$throttle = throttle;

使用文件

当用户点击某个按钮时,我们可以使用防抖函数来避免用户误操作导致多次触发相同的事件。而节流函数可以限制用户点击按钮的频率,防止连续点击导致重复的操作。

下面是一个使用点击事件的防抖和节流函数的案例:

html.vue

<template>
  <div>
    <button @click="debouncedClick">点击触发防抖函数</button>
    <button @click="throttledClick">点击触发节流函数</button>
  </div>
</template>

<script>
export default {
  created() {
    // 使用防抖函数处理点击事件
    this.debouncedClick = this.$debounce(this.handleClick, 1000);

    // 使用节流函数处理点击事件
    this.throttledClick = this.$throttle(this.handleClick, 1000);
  },
  methods: {
    handleClick() {
      console.log("按钮点击事件处理中...");
      // 在这里编写具体的点击事件处理逻辑
    },
  },
};
</script>

在以上例子中,有两个按钮,分别绑定了 @click 事件并调用不同的处理方法。debouncedClick 使用防抖函数来处理点击事件,延迟执行 handleClick 方法,以避免用户连续点击导致触发多次事件。throttledClick 使用节流函数来处理点击事件,限制用户点击按钮的频率,确保在一定时间内只触发一次事件。通过这些防抖和节流函数的应用,可以避免用户的误操作并提升用户体验。

使用场景

防抖的使用场景:

  • 输入框搜索:当用户在输入框中输入文字时,防抖可以用来延迟搜索操作的执行,只在用户停止输入一段时间后执行搜索操作,减少无意义的搜索请求;
  • 窗口调整/滚动事件:在窗口调整大小或滚动的过程中,防抖可以防止事件被频繁触发,减少不必要的计算和重绘操作;
  • 表单验证:在表单输入验证时,防抖可以延迟验证操作的执行,只在用户完成输入一段时间后进行验证,避免频繁的验证操作;
  • 按钮点击:当用户点击一个按钮时,防抖可以用来避免用户误操作或者重复点击,确保只执行一次操作。

节流的使用场景:

  • 页面滚动:在页面滚动过程中,节流可以用来限制触发回调函数的频率,减少事件处理的次数,以避免过多的计算和渲染操作;
  • 鼠标移入/移出事件:在监听鼠标移入或移出某个元素的事件时,节流可以限制事件的触发频率,避免因为快速进入和离开导致频繁的函数调用;
  • 滑动操作:在监听滑动操作时,节流可以限制回调函数的触发频率,以便更好地控制滑动效果和动画的展示;
  • 请求发送:在发送网络请求时,节流可以用来控制请求的频率,以避免发送过多的请求造成服务器过载。

总的来说,防抖适合在需要避免频繁触发事件的场景下使用,而节流适合控制函数的调用频率,避免过多函数调用的场景下使用。

总结

  • 防抖和节流是两种常见的优化技术,用于控制事件的触发频率,以提高性能和用户体验。

  • 防抖它限制一个函数在连续触发事件后,只执行一次。当事件被触发时,防抖函数会设置一个定时器。如果在指定的时间内再次触发事件,定时器会被清除并重新设置。只有当事件停止触发一段时间后,定时器才会执行相应的函数。防抖常用于处理在用户频繁操作时的回调函数,例如在输入框输入时触发搜索操作。通过防抖,可以减少不必要的函数调用,提高性能。
  • 节流它控制函数在一段时间内的触发频率。当事件触发时,节流函数会执行相应的回调函数,并设置一个定时器来限制在一段时间内无法再次触发事件。只有当指定的时间间隔过去后,才能再次触发函数。节流常用于处理用户频繁触发事件时的回调函数,例如在页面滚动时触发某些效果动画。通过节流,可以限制函数的调用频率,防止因频繁触发事件而导致性能问题。
  • 综上所述,防抖和节流是对函数执行频率进行控制的技术。防抖限制连续触发事件后只执行一次函数,而节流控制在一段时间内只能触发一次函数。这两种技术都能够优化性能,并提供更好的用户体验。

文章来源:https://blog.csdn.net/weixin_66948502/article/details/135741899
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。