前端 防抖和节流

news2025/3/16 9:54:14

在前端开发中,防抖(Debounce)节流(Throttle)是两种常用的性能优化技术,尤其在处理频繁触发的事件时显得尤为重要。无论是在用户输入、窗口调整大小,还是滚动事件中,这两种技术都可以有效减少函数执行的频率,从而提升网页的响应速度和用户体验。在本文中,我们将深入探讨防抖和节流的原理、应用场景及其实现方法,帮助开发者更好地掌控这两种优化手段。

 现在好啦,js-tool-big-box工具包提供出了这个两个方法,并有专门的团队进行维护公有方法,大家可以直接调用,减少了自己的代码量,可以有更多的时间去专注于自己的业务开发。

1 安装和引入

执行安装命令

npm i js-tool-big-box

项目中引入(Vue项目),工具包对外提供了 eventBox 对象,可以用来调用防抖和节流的方法。

import { eventBox } from 'js-tool-big-box';

2 防抖的调用学习 

防抖呢,比如说一个人频繁在输入框输入值,然后我们需要去判断它输入的手机号对不对,邮箱对不对,后者拿着这个输入值去发送Ajax请求去查东西,肯定不能输入一个字符就赶紧拿着去查,对吧,所以就需要防抖。

防抖呢就是设定一个时间值,比如2秒,你在这2秒内有操作,就取消,一直到2秒后没有操作了,再去执行任务。

比如等电梯,早上着急打卡的同学们,越着急,越有人按电梯,有人按一下就得等5秒,除非有人急的不行了,按了关闭按钮。所以,等5秒,没人上了,电梯关闭,开始往上走。如果第4秒又有人按按钮,他进来了,那么就再等5秒吧。

<template>
  <div>
    <input @keyup="handleChange" v-model="inputVal" />
  </div>
</template>

<script>
import { eventBox } from 'js-tool-big-box';

export default {
  name: 'dj',
  data () {
    return {
      inputVal: ''
    }
  },

    created() {
        this.myDebounce = eventBox.debounce((data) => {
          this.sendAjax(data);
        }, 2000);
      },

methods: {
    handleChange(event) {
      const val = event.target.value;
      this.myDebounce(val);
    },
    sendAjax(data) {
      console.log('发送时间::', new Date().getTime());
      console.log('发送请求:', data);
    },
  }
}
</script>

在截图中,我分别输入了1   222 333 ,其中222和333是频繁输入的,然后只调用了一次

3 节流的调用学习

节流呢,就像坐火车,人来人往的车站,川流不息的人群,但火车有时刻表,隔多久一趟车。下拉刷新就正好用到这个地方。

<script>
import { eventBox } from 'js-tool-big-box';

export default {
  name: 'dj',
  data () {
    return {
      inputVal: ''
    }
  },
  created() {
    this.myThrottle = eventBox.throttle((data) => {
      this.sendAjax(data);
    }, 2000);
  },
  methods: {
    handleChange(event) {
      const val = event.target.value;
      this.myThrottle(val);
    },
    sendAjax(data) {
      console.log('发送时间::', new Date().getTime());
      console.log('发送请求:', data);
    },
  }
}
</script>

看这个时间戳打印的,我一直在频繁输入,然后他隔一段时间才执行一次,不错不错,节流了。

4 使用方法总结 

方法名返回值入参
debounce传入的执行方法

第一个参数必填,表示需要执行的方法,

第二个参数非必填,表示需要延迟执行的时间,可不传,默认300毫秒

throttle传入的执行方法

第一个参数必填,表示需要执行的方法,

第二个参数非必填,表示需要延迟执行的时间,可不传,默认300毫秒

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

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

相关文章

el-transfer和el-tree进行结合搞一个树形穿梭框

由于业务需求需要在穿梭框里使用树形结构&#xff0c;但是本身element里并不支持&#xff0c;于是参考了别的大佬发的文章作为思路及后续自己新增了一些处理功能。 目录 1.拷贝代码放到自己的项目目录中 2.改造el-transfer的源码 3.修改tree-transfer-panel.vue文件 4.修改…

C语言内存函数超详细讲解

个人主页&#xff1a;C忠实粉丝 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 C忠实粉丝 原创 C语言内存函数超详细讲解 收录于专栏【C语言学习】 本专栏旨在分享学习C语言学习的一点学习笔记&#xff0c;欢迎大家在评论区交流讨论&#x1f48c; 目录 1. m…

IDEA打开项目报错

IDEA打开项目报错&#xff1a; Cannot read scheme C:\Users\xxxxxx\AppData\Roaming\JetBrains\IntelliJIdea2023.2\qaplug_profiles\Default.xmljava.lang.AbstractMethodError: Receiver class com.soldevelo.qaplug.scanner.AnalysisProfileManager$2 does not define or i…

浅谈后端boot框架整合第三方技术JUnit MyBatis Druid整体思想

整合第三方技术 不要单单学习指定技术与springboot整合的方式 学习目标的是整合整体的技术的思路 拿到任何一个第三方技术后我们在springboot中如何操作 这是真正我们应该学习的东西 以后能整合任意技术 整合JUnit JUnit 是一个流行的开源测试框架&#xff0c;用于 Java …

frp搭建内网流量转发

前提条件 有一台外网服务器 背景介绍 外网服务器linux内网客户端Windows 10下载frp软件安装包 下载地址:https://github.com/fatedier/frp/releases 服务端软件包下载 客户端软件包下载 服务端部署 解压软件包 tar xzvf frp_0.58.0_linux_amd64.tar.gz修复加压后文件夹名…

解决远程链接的“Gtk-WARNING **: cannot open display;

1.需要检查ssh配置中X11Forwarding是否启用 2.检查本地ssh工具是否启用x11转发&#xff08;下图以mobaxterm为例&#xff09; 3.检查是否有防火墙等其他网络拦截&#xff0c;如果没有特殊需求&#xff0c;这里可以直接将防火墙服务关闭 4.按上诉操作检查后&#xff0c;正常情况…

力扣周赛398题解

特殊数组Ⅰ 如果数组的每一对相邻元素都是两个奇偶性不同的数字&#xff0c;则该数组被认为是一个 特殊数组 。 Aging 有一个整数数组 nums。如果 nums 是一个 特殊数组 &#xff0c;返回 true&#xff0c;否则返回 false。 示例 1&#xff1a; 输入&#xff1a;nums [1] …

工业路由器在工厂数字化的应用及价值

随着科技的飞速发展&#xff0c;数字化转型已成为工厂提高效率、降低成本、实现智能化管理的关键途径。在这个过程中&#xff0c;工业路由器凭借其独特的优势&#xff0c;正逐渐成为工厂数字化建设不可或缺的核心组件。本文将深入探讨工业路由器在工厂数字化中的应用及价值&…

Nuxt3 实战 (七):配置 Supabase 数据库

前言 这个章节我们要先把数据库的环境配置好&#xff0c;古人云&#xff1a;工欲善其事&#xff0c;必先利其器。 这两天我一直在网上寻找最适合 Nuxt 的数据库&#xff0c;之前在做个人项目时经常用的是 Mysql 和 MongoDB&#xff0c;也用过 ORM 框架比如&#xff1a;Sequel…

深入理解循环控制语句 - for

循环就是重复的意思&#xff0c;它是编程中的基石&#xff0c;它使程序能够重复执行某段代码&#xff0c;直至满足特定条件为止。 在Java中&#xff0c;for循环是一种常用的循环结构&#xff0c;它以紧凑的形式实现了迭代过程。 一、for循环基础 1.1 for循环简介 for循环在…

C++容器之无序多集(std::unordered_multiset)

目录 1 概述2 使用实例3 接口使用3.1 construct3.2 assigns3.3 iterators3.4 capacity3.5 find3.6 count3.7 equal_range3.8 emplace3.9 emplace_hint3.10 insert3.11 erase3.12 clear3.13 swap3.14 bucket_count3.15 max_bucket_count3.16 bucket_size3.17 bucket3.18 load_fa…

00.OpenLayers快速开始

00OpenLayers快速开始 官方文档&#xff1a; 快速开始&#xff1a;https://openlayers.org/doc/quickstart.html 需要node环境 一、设置新项目 npm create ol-app my-app cd my-app npm start第一个命令将创建一个名为 my-app​ 的目录&#xff08;如果您愿意&#xff0c;…

【话题】我眼神的IT行业现状与未来趋势

目录 一、挑战 教学资源的重新分配 教师角色的转变 学生学习方式的改变 教育评价体系的挑战 二、机遇 个性化学习 跨学科学习 国际合作与交流 创新教育模式 三、如何培养下一代IT专业人才 更新教育理念 加强基础设施建设 整合课程资源 加强实践教学 培养跨学科…

Golang并发编程-协程goroutine任务取消(Context)

文章目录 前言一、单个任务的取消二、 所有任务取消三、Context的出现Context的定义Context使用 总结 前言 在实际的业务种&#xff0c;我们可能会有这么一种场景&#xff1a;需要我们主动的通知某一个goroutine结束。比如我们开启一个后台goroutine一直做事情&#xff0c;比如…

浅谈C++函数

目录 一、函数的概念二、调用函数的两个前提三、函数传参的三种形式四、函数返回类型 一、函数的概念 函数是C程序的基本模块&#xff0c;通常一个C程序由一个或多个函数组成。函数可以完成用户指定的任务&#xff0c;一般分为库函数和用户自定义的函数。函数由函数头和函数体…

AIGC-常见图像质量评估MSE、PSNR、SSIM、LPIPS、FID、CSFD,余弦相似度----理论+代码

持续更新和补充中…多多交流&#xff01; 参考: 图像评价指标PNSR和SSIM 函数 structural_similarity 图片相似度计算方法总结 MSE和PSNR MSE: M S E 1 m n ∑ i 0 m − 1 ∑ j 0 n − 1 [ I ( i , j ) − K ( i , j ) ] 2 MSE\frac{1}{mn}\sum_{i0}^{m-1}\sum_{j0}^{n-1}[…

重学java 43.多线程 多等待多唤醒案例

Fear never builds the future,but hope does. —— 24.5.25 多等待多唤醒问题 在多条线程同时消费同时等待时&#xff0c;会出现问题 BaoZiPu package S77ThreadMoreWait;/*count和flag可以定义成包装类&#xff0c;但要记得给count和flag手动赋值不然对于本案例来说&#xff…

C# MemoryStream流的详解与示例

文章目录 1. MemoryStream的基本介绍2. 创建MemoryStream对象无参构造函数带参构造函数 3. 向MemoryStream中写入数据写入字节数组写入字符串 4. 从MemoryStream中读取数据读取字节数组读取字符串 5. MemoryStream的实用辅助方法获取长度设置长度定位 6. 示例代码 在C#中&#…

JWT使用方法

目录 基础概念 依赖 生成令牌 工具类 控制层 解析令牌 工具类 网关过滤器 效果 基础概念 Json web token (JWT), 是为了在网络应用环境间传递声明而执行的一种基于JSON的开放标准&#xff08;(RFC 7519).该token被设计为紧凑且安全的&#xff0c;特别适用于分布式站点…

局域网桌面监控软件哪个好用?良心推荐

如何有效地监控和管理内部员工的计算机使用行为&#xff0c;防范潜在的安全风险&#xff0c;提高工作效率&#xff0c;是众多企业管理者关注的焦点。 而一款优秀的局域网桌面监控软件无疑能为企业的IT治理提供有力支撑。 小编在此给大家推荐一款好用的局域网桌面监控软件——域…