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

news2024/11/18 6:46:16

封装文件

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

  • 首先,我们需要定义两个函数:防抖函数和节流函数。这两个函数的目的是为了减少频繁触发某个事件导致的性能问题;
  • 防抖函数的实现思路是创建一个计时器变量,用于延迟执行函数。当触发事件时,首先清空之前的计时器,然后创建一个新的计时器来延时执行函数。如果在延时期间再次触发事件,会清空之前的计时器并重新创建计时器;
  • 节流函数的实现思路是创建一个计时器变量,用于限制函数的调用频率。当触发事件时,如果计时器变量不存在,则立即执行函数,并创建一个计时器,在指定时间后重置计时器变量。如果在计时器未过期期间再次触发事件,则无效,不会再次执行函数;
  • 在函数内部使用闭包,可以保存变量的状态,使得每次触发事件时都能访问到正确的变量值;
  • 最后,通过 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 使用节流函数来处理点击事件,限制用户点击按钮的频率,确保在一定时间内只触发一次事件。通过这些防抖和节流函数的应用,可以避免用户的误操作并提升用户体验。

使用场景

防抖的使用场景:

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

节流的使用场景:

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

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

总结

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1407219.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

c# ADODB.Recordset实例调用Fields报错

代码&#xff1a; using System; using System.CodeDom; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using ADODB;namespace ConsoleApp1 {internal class Programre{static ADODB.Recordset recordsetInstance…

trino-435: trino接入TIDB数据源

文章目录 一、TIDB介绍二、TIDB源接入流程三、遇到的错误1、数据源注册:2、查询表数据一、TIDB介绍 二、TIDB源接入流程 三、遇到的错误 1、数据源注册: http://localhost:8080/v1/catalog/register?name=tidb_test {"connector.name":"tidb",&quo…

NodeJs中要注意onClick的函数调用写法

在一个测试页面写简单的测试函数时候&#xff0c;遇到一个页面刷新问题。同一个函数被调用了几次。 const [msg, setMsg] React.useState("");async function updateGoodsQty2() {...setMsg(rsp.message)}async function updateGoodsQty3() {...setMsg(rsp.message)…

Elasticsearch分布式一致性原理剖析(一)-节点篇

前言 “Elasticsearch分布式一致性原理剖析”系列将会对Elasticsearch的分布式一致性原理进行详细的剖析&#xff0c;介绍其实现方式、原理以及其存在的问题等(基于6.2版本)。 ES目前是最流行的分布式搜索引擎系统&#xff0c;其使用Lucene作为单机存储引擎并提供强大的搜索查…

从零开始学Python第02课:第一个Python程序

在上一课中&#xff0c;我们对 Python 语言的过去现在有了一些了解&#xff0c;我们准备好了运行 Python 程序所需要的解释器环境。相信大家已经迫不及待的想开始自己的 Python 编程之旅了&#xff0c;但是新问题来了&#xff0c;我们应该在什么地方书写 Python 程序&#xff0…

Linux:0_Linux 环境搭建

Linux 环境搭建 1. 购买云服务器 2. 下载XShell XShell 是一个远程终端软件. 下载官网 https://www.netsarang.com/products/xsh_overview.html 下载安装的时候选择 “home/school” 则为免费版本. 3. 使用 XShell 登陆主机 XShell 下的复制粘贴 复制: ctrl insert (有些…

智能机器人与旋量代数(12)

Chapt 4. 旋量代数在机器人学中的应用 4.1 串联机器人正运动学的指数积(PoE, Product of Exponetial)公式 4.1.1 回顾&#xff1a;机器人正运动学的Denavit-Hartenberg (D-H)参数公式 D-H 建模法: D-H 建模方法是由 Denavit 和 Hartenberg (ASME, 1955) 提出的一种建模方法&…

【AI视野·今日NLP 自然语言处理论文速览 第七十五期】Thu, 11 Jan 2024

AI视野今日CS.NLP 自然语言处理论文速览 Thu, 11 Jan 2024 Totally 36 papers &#x1f449;上期速览✈更多精彩请移步主页 Daily Computation and Language Papers Leveraging Print Debugging to Improve Code Generation in Large Language Models Authors Xueyu Hu, Kun K…

3.jmeter接口关联及实战

1.当所传参数包含键值对和json文件时&#xff0c;键值对放在链接后&#xff0c;参数放在消息体数据中 2.当查看结果树返回乱码时&#xff0c;修改请求中内容编码为utf-8 一、jmeter接口关联 1.正则表达式提取器 接口2.3传递的参数中需要用到接口1的返回值 禁用接口2.3&#…

如何在美国硅谷高防服务器上运行自定义的脚本和应用程序

在美国硅谷高防服务器上运行自定义的脚本和应用程序需要一定的技术和知识。下面我们将介绍一些关键步骤&#xff0c;帮助您顺利地在这些服务器上运行自定义应用程序和脚本。 确保您有对服务器的访问权限&#xff0c;并且已经通过SSH等方式连接到服务器。接下来&#xff0c;您可…

Dify学习笔记-基础介绍(一)

1、简介 Dify AI是一款强大的LLMOps&#xff08;Language Model Operations&#xff09;平台&#xff0c;专为用户提供便捷的人工智能应用程序开发体验。 该平台支持GPT系列模型和其他模型&#xff0c;适用于各种团队&#xff0c;无论是用于内部还是外部的AI应用程序开发。 它…

司铭宇老师:门店销售人员培训:门店销售的素质要求:打造高绩效销售团队的秘诀

门店销售人员培训&#xff1a;门店销售的素质要求&#xff1a;打造高绩效销售团队的秘诀 在市场竞争日益激烈的今天&#xff0c;门店销售作为企业盈利的重要渠道&#xff0c;其地位日益凸显。然而&#xff0c;门店销售的成败与否&#xff0c;很大程度上取决于销售人员的素质。…

数据库查询练习

数据准备 #建学生信息表student create table student ( sno varchar(20) not null primary key, sname varchar(20) not null, ssex varchar(20) not null, sbirthday datetime, class varchar(20) ); #建立教师表 create table teacher ( tno varchar(20) not null primary…

云轴科技ZStack位列IDC云系统软件市场教育行业TOP2

近日&#xff0c;全球IT市场研究和咨询公司IDC发布 《中国云系统软件市场跟踪报告2023H1》 ZStack作为产品化的云基础软件提供商 位居云系统软件市场第一梯队 市场份额位列独立云厂商*第一 营收同比增速最快 教育行业TOP2 在教育行业&#xff0c;云计算已成为教育行业信息化的…

21.云原生之ArgoCD CICD实战(部分待补充)

云原生专栏大纲 文章目录 部署项目介绍项目结构介绍GitLab CI/CDGitLab CI/CD主要特点和功能 部署测试argocd的cd过程CICD工作流准备工作github中工作流文件创建gitlab中工作流文件创建【实操待补充】GitLab CI示例 数据加密之seale sealedBitnami Sealed Secrets介绍Bitnami …

元数据管理在数据仓库中的实践应用

一、什么是数据仓库的元数据管理? 1、什么是元数据? 元数据(Metadata),又称中介数据、中继数据,为描述数据的数据(data about data)。 抽象的描述:一组用于描述数据的数据组,该数据组的一切信息都描述了该数据的某方面特征,则该数据组即可被称为元数据。 举几个…

JRTWeb对Excel的支持

之前实现的是Excel的客户端导出模板协议&#xff0c;有的情况需要从Web直接把数据弄成Excel文件下载&#xff0c;或者有时候需要导入Excel数据进入系统&#xff0c;为此需要一个List得到Excel文件的封装和一个Excel文件得到Json串供界面做解析的方法。 测试效果&#xff0c;把…

服务器托管在数据中心,如何有效避免中勒索病毒?

当服务器托管在数据中心时&#xff0c;安全措施需要更加严密&#xff0c;以确保服务器免受勒索病毒的攻击。 当服务器托管在数据中心时&#xff0c;安全措施需要更加严密&#xff0c;以确保服务器免受勒索病毒的攻击。以下是一些有效的策略和措施&#xff0c;帮助您降低风险&am…

Linux下的gcc与g++

文章目录 一.Linux gcc与g1.gcc如何生成可执行程序&#xff08;g同&#xff09;2.函数库 二.Linux项目自动化构建工具-make/makefile 一.Linux gcc与g 1.gcc如何生成可执行程序&#xff08;g同&#xff09; 预处理&#xff08;宏定义替换,展开头文件代码,条件编译,去注释&…

04-了解所有权

上一篇&#xff1a; 03-常用编程概念 所有权是 Rust 最独特的特性&#xff0c;对语言的其他部分有着深刻的影响。它使 Rust 可以在不需要垃圾回收器的情况下保证内存安全&#xff0c;因此了解所有权的工作原理非常重要。在本章中&#xff0c;我们将讨论所有权以及几个相关特性&…