vue防抖和节流是什么_JavaScript防抖与节流,你知道多少?
JavaScript 的节流和防抖已经是老生畅谈的问题了,对于前端行业技术大牛来讲不过是小菜一碟,而对于绝大多数前端小白或初级工程师,绝对是必备的知识,值得学习。
接下来小郭就带大家一起学习“防抖”与“节流”。
防抖
不知道大家第一次看到这个词会怎样理解。在我第一次接触到这个概念时,直接根据字面去理解,天真的以为是JS函数有抖动。
其实是为了防止一个函数在段时间内疯狂执行。
那它会产生在哪些场景下呢?例如:
- 搜索框 input事件;
- 鼠标移动 mousemove事件;
- 视窗大小变化 resize事件;
当然还有很多其他的一些实际场景。再来研究一下它的防抖的原理。
原理:不希望某个事件在短时间内疯狂触发,影响性能,所以我们设置一个定时器,让这个事件在一定时间延迟后再执行,如果这个延迟中间中途这个事件又触发了,那就把上次事件绑定的定时器取消,避免了上次事件执行,然后重新设置一个定时器绑定在当前事件上。
以上是我个人对防抖的理解。比如我们改变视窗大小的时候,我们更希望在视窗大小固定的时候再去执行某个方法。
现在,我们需要一个变量指向定时器,而且这个变量应该是‘全局变量’,可以用闭包实现这个‘全局变量’。
// 防抖核心方法function debounce(fn, delay) { var timer = 0 var _delay = delay || 800 return function() { if(timer) { clearTimeout(timer) } timer = setTimeout(() => { fn() }, _delay); }}
拿到代码马上安排,以视窗大小改变来举例
- 未安排防抖
function resize() { console.log('视窗改变时需要执行些什么...')}window.addEventListener('resize',resize)
效果:方法多次触发
未防抖
- 安排防抖
function debounce(fn, delay) { var timer = 0 var _delay = delay || 800 return function () { if (timer) { clearTimeout(timer) } timer = setTimeout(() => { fn() }, _delay); }}function resize() { console.log('视窗改变时需要执行些什么...')}window.addEventListener('resize', debounce(resize, 1000))
效果:方法只在需要的时候触发
防抖
对比结果一目了然,如果这样的情况发生在请求接口的场景下,防抖必然会减少服务器的压力。这何尝不是一种关键的性能优化。
节流
节流,目的很明确,就是节省流量。如果一个方法在短时间内疯狂执行,我们希望它每隔一段时间执行。如此是不是可以节省流量呢?
节流主要使用在懒加载时请求数据,在频繁滑动的时候,不会疯狂请求接口,减小对服务器的压力
// 节流核心代码function throttle(fn, delay = 800) { var timer = 0 var _delay = delay return function(){ if(!timer) { setTimeout(() => { fn() timer = 0 }, _delay); } }}
依然是以视窗大小改变举例:
function resize(n) { return function () { console.log('视窗改变时需要执行些什么...' + n++) }}window.addEventListener('resize', throttle(resize(1)))
效果:方法被“限量”执行,不会疯狂执行
节流
看到现在,大家应该对“防抖”与“节流”已经掌握,关键还是要应用到实际的项目中。为了提升大家的代码性能,一定要看到最后。
有任何问题欢迎在下方留言或私信我,想了解更多前端知识关注公众号“一郭鲜”,小郭等着你
vue防抖和节流是什么_JavaScript防抖与节流,你知道多少?相关推荐
- 防抖 节流_【前端面试】节流与防抖
我们用两张图表示什么是节流和防抖. 防抖 节流 由图可见,防抖的意思是,当用户在一段时间内连续频繁的试图执行一个函数的时候,只有最后一次,函数被真正的执行.节流的意思是,当用户在某一个时刻执行了一次函 ...
- vue防抖和节流是什么_防抖和节流为什么重要!!!
是什么 防抖和节流两者类似[但并不一样]是用来控制某一函数在特定时间内执行次数的技术点. 什么时候重要 在给Dom绑定事件的时候显得尤为重要,因为相当于在事件函数和Dom之间加了一层控制层. 为什么重 ...
- 手把手教你在vue中使用自定义指令全局封装防抖节流函数
第一步在src下创建utils文件夹并创建common.js文件 //'@/utils/common.js' 文件function throttle(bindObj, fn, delay) {bind ...
- 防抖与节流方案_函数防抖和节流
在前端开发的过程中,我们经常会需要绑定一些持续触发的事件,如 resize.scroll.mousemove 等等,但有些时候我们并不希望在事件持续触发的过程中那么频繁地去执行函数. 通常这种情况下我 ...
- 什么是防抖和节流?如何实现防抖和节流?
防抖(Debounce)和节流(Throttle)都是用来控制某个函数在一定时间内触发次数,两者都是为了减少触发频率,以便提高性能或者说避免资源浪费.毕竟JS操作DOM对象的代价还是十分昂贵的. 应用 ...
- 使用lodash防抖_什么,lodash 的防抖失效了?
戳蓝字「前端技术优选」关注我们哦! 作者:yeyan1996 https://juejin.im/post/6892577964458770445 应某人的要求被迫营业,望各位看官不要吝啬手中的 ...
- android 功能防抖,一款简单的消息防抖框架
WQthrottle 是一款消息防抖框架,在一定的时间延时中做到只触发一次结果的回调. 使用 使用的话,还是看 github 的 README 吧. 开发目的 开发这款框架的初衷是为了解决以下的几个痛 ...
- android 实现相机防抖处理,手机拍视频怎么防抖?分享几个好用的防抖技巧,现在学起来不亏...
原标题:手机拍视频怎么防抖?分享几个好用的防抖技巧,现在学起来不亏 手机的作用是非常大的,比方说,我们可以用手机来聊天:还可以用手机来看小说:也可以用手机来查资料.当然最最重要的是手机可以用来拍照.拍 ...
- vue 接口节流_vue防抖节流之v-debounce--throttle使用指南
最新封装了一个vue防抖节流自定义指令,发布到npm上,有用欢迎star,谢谢! 使用比较简单,取消利用vue注册事件,采用指令来注册事件,防抖指令v-debounce,节流指令v-debounce, ...
最新文章
- 蓝图跑酷游戏教学的项目文件
- html的关于上一行对齐,html – 如何在一行上对齐我的所有li?
- retrofit content-length为0_LiveData+Retrofit 网络请求实战
- cuDNN error: CUDNN_STATUS_EXECUTION_FAILED
- macOS下的视频格式转换器
- 解决IE6中PNG图出现灰色背景问题
- 静态反编译工具IDA Pro 7 for Mac
- Atitit uke各大事业部规划 约365个事业部
- java图像预处理_图像预处理(一)基本特征提取
- 继电器驱动原理详解(Relay)
- 麦肯锡教我的思考武器-读书心得
- 判断无线网卡是否支持监听模式
- 【HANA系列】SAP HANA XS Administration Tool登录参数设置
- MATLAB 像素画绘制APP
- IBM ServerGuide 9.0
- 【诺贝尔物理奖量子纠缠】启发:命由我作,福由我求
- MyBatis02:CRUD 操作,javaee教程网上购书系统
- 腾讯云服务器网站504,使用腾讯、百度云CDN现403和504错误的解决及使用CDN踩的坑...
- 【数字设计】沐曦科技_笔试题目分享
- 猿创征文|一文吃透JAVA初学者的开发工具
热门文章
- c语言补全程序,跪求高手解答简单的程序补全题~!
- lisp修改界址线属性_地籍与房产测量 A卷答案
- 删除a标签下面的横线
- mapdb java_MapDB使用入门
- R语言基础入门(6)之向量下标和子集
- netbeans java9_Java 开发新选择?Apache NetBeans IDE 9.0 备受好评
- mysql pdo 查询一条数据,使用 PDO 关联查询 MySQL 数据
- php jsonerrorsyntax,php – json_decode返回JSON_ERROR_SYNTAX,但在线格式化程序表示JSON可以...
- 永恒python配合什么主武器好_学点python吧,别再这么累了,让你轻松实现财富自由...
- Contest Hunter 0103最短Hamilton路径 【状压dp】 By cellur925