各位朋友你们好呀。今天是立春，明天就是正月十五元宵节了，这种立春 + 元宵相隔的时候，可是很难遇到的，百年中就只有几次。在这提前祝大家元宵快乐。

今天给大家带来的是Vue 3 中的极致防抖/节流（含常见方式防抖/节流）这篇文章，文章中不仅会讲述原来使用的防抖或节流方式，还会带来新的一种封装方式，使用起来更简单、更清晰。

前言

在前端的开发过程中，在涉及到与用户交互的过程中是基本上都是需要处理的，常规操作就是在对应位置加上防抖或者节流。

加上防抖或者节流的作用：一是为了防止用户频繁操作；二是为了节约一定的服务器资源，减少资源浪费的情况。

防抖或节流原理

防抖（debounce）

如果用户多次频繁操作以最后一次为准，当然也可以以第一次为准，进行数据更新或者网络资源请求，以消除冗余的操作，或者减少一定的请求资源浪费。

示例代码

function debounce (fn, delay = 300){let timer = nullreturn function (...args) {clearTimeout(timer)timer = setTimeout(()=>{fn.call(this, ...args)}, delay);}
}

使用

debounce(()=> count += 1, 1000)

节流（throttle ）

在一定时间范围内，用户触发多次只会执行一次以达到防止用户频繁操作的目的。

示例代码

let timer = null
function throttle (fn, delay = 300) {if(timer == null){timer = setTimeout(() => {fn()clearTimeout(timer)timer = null}, delay);}
}

使用

throttle(()=> count += 1, 1000)

环境说明

vue 3
vite

新封装

这里我分两个模块来讲述。一个是防抖；另一个是节流。

虽然这两个差别不是很大，但还是有区别的。上车，兄弟们。

Vue 3 中的极致防抖/节流（含常见方式防抖/节流）相关推荐

Vue项目中最简单的使用集成UEditor方式，含图片上传
Vue 3 项目参考这里前言封面是UEditor的百度指数折线图.虽然今天已经是 2018 年,且优秀的富文本编辑器层出不穷(包括移动端),但从图中可以看出UEditor仍然维持着较高的搜索热 ...
在 Quasar cli 搭建的 vue 项目中引用阿里字体图标 iconfont symbol方式
在 Quasar cli 搭建的 vue 项目中引用阿里字体图标 iconfont 1. symbol 方式 2. font class 方式(未实践) 1. symbol 方式首先说明一下,这 ...
Java中定义字符串的两种常见方式、使用==和equals()比较字符串
在讲使用==和equals()比较字符串之前,我们首先要讲定义字符串的两种常见方式,一种是定义一个常量,即直接定义字符串,一种是通过new关键字定义一个变量,即使用String类定义字符串,如下图: ...
Vue axios 中提交表单数据(含上传文件)
http://www.jb51.net/article/118051.htm 转载于:https://www.cnblogs.com/tanhao/p/8488206.html
vue样式引入图片_详解Vue.js中引入图片路径的几种方式
vue --version 3.6.3 记录总结一下的Vue中引入图片路径的几种书写方式 vue中静态资源的引入机制 Vue.js关于静态资源的官方文档静态资源可以通过两种方式进行处理: 在 Jav ...
VUE项目中图片加载过大处理方式-渐进式方式-懒加载方式--附源码
解决有两步: 1.采用渐进式加载:原图未加载完时显示比它内存小的模糊图: 2.采用懒加载:只加载可视区域的图片,即滚动到可视区域时再加载图片 vue-lazyload-img:VUE图片懒加载插件 v ...
CTF中压缩包解密的几种常见方式
压缩包解密通用方法: 1.用winhex打开,搜索字符pass . key 等,查看是否有含有压缩包密码 2.如果要爆破: 先0-6位数字来一遍 3.如果爆破不成功可以根据题意或者社工猜密码组合.例 ...
flink中维表Join几种常见方式总结
flink中维表Join 需求如下: 一个主流中数据是用户信息,字段包括用户姓名.城市id: 维表是城市数据,字段包括城市ID.城市名称. 要求用户表与城市表关联,输出为:用户名称.城市ID.城市名称 ...
Vue 2 中实现 CustomRef 方式防抖/节流
今天给大家带来的是Vue 2 中的实现 CustomRef 方式防抖/节流这篇文章,前几天利用 customRef 实现了在 vue 3 中的极致防抖/节流的新方式.感兴趣的朋友可以点击

Vue 3 中的极致防抖/节流（含常见方式防抖/节流）

前言

防抖或节流原理

防抖（debounce）

示例代码

使用

节流（throttle ）

示例代码

使用

环境说明

新封装

Vue 3 中的极致防抖/节流（含常见方式防抖/节流）相关推荐

最新文章

热门文章