位置: IT常识 - 正文

JS—节流与防抖(js防抖函数和节流函数)

编辑:rootadmin
JS—节流与防抖 一、js防抖和节流

推荐整理分享JS—节流与防抖(js防抖函数和节流函数),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:js的防抖和节流是什么意思,js防抖函数和节流函数,js防抖节流的写法,js节流和防抖的区分和实现详解,js节流防抖区别,js防抖节流的写法,js节流和防抖的区分和实现详解,js防抖节流的写法,内容如对您有帮助,希望把文章链接给更多的朋友!

在进行窗口的resize、scroll、输出框内容校验等操纵的时候,如果事件处理函数调用的频率无限制,会加重浏览器的负担,导致用户体验非常之差。那么为了前端性能的优化也为了用户更好的体验,就可以采用防抖(debounce)和节流(throttle)的方式来到达这种效果,减少调用的频率。

二、为什么滚动scroll、窗口resize等事件需要优化

滚动事件的应用很频繁:图片懒加载、下滑自动加载数据、侧边浮动导航栏等。

在绑定scroll、resize事件时,但它发生的时候,它被触发的频率非常高,间隔很近。在日常开发的页面中,事件中涉及到的大量的位置计算、DOM操作、元素重绘等等这些都无法在下一个scroll事件出发前完成的情况下,浏览器会卡帧。

三、滚动和页面渲染前端性能优化的关系

为什么滚动需要优化?前面提到了事件中涉及到大量的位置计算、DOM操作、元素重绘等等,这些又与页面的渲染有关系,页面渲染又与前端的性能优化有关系?套娃一样,一层套着一层,每一层都联系紧密,每一层都如此平凡且重要。

review一下前端的渲染和优化

web页面展示经历的步骤:js—style—layout—paint—composite,简单回顾一下,在这里不做详细的介绍哦!

网页生成的时候,至少会渲染(Layout+Paint)一次。用户访问的过程中,还会不断重新的重排(reflow)和重绘(repaint),用户scroll行为和resize行为会导致页面不断的进行重新渲染,而且间隔频繁,容易造成浏览器卡帧。

四、防抖Debounce(1)防抖Debounce情景JS—节流与防抖(js防抖函数和节流函数)

①有些场景事件触发的频率过高(mousemove onkeydown onkeyup onscroll)

②回调函数执行的频率过高也会有卡顿现象。 可以一段时间过后进行触发去除无用操作

(2)防抖原理

一定在事件触发 n 秒后才执行,如果在一个事件触发的 n 秒内又触发了这个事件,以新的事件的时间为准,n 秒后才执行,等触发事件 n 秒内不再触发事件才执行。

官方解释:当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定的时间到来之前,又一次触发了事件,就重新开始延时。

(3)防抖函数简单实现 //简单的防抖函数 function debounce(func, wait, immediate) { //定时器变量 var timeout; return function () { //每次触发scrolle,先清除定时器 clearTimeout(timeout); //指定多少秒后触发事件操作handler timeout = setTimeout(func, wait); }; }; //绑定在scrolle事件上的handler function handlerFunc() { console.log('Success'); } //没采用防抖动 window.addEventListener('scroll', handlerFunc); //采用防抖动 window.addEventListener('scrolle', debounce(handlerFunc, 1000));(4)防抖函数的演化过程①this event绑定问题 //以闭包的形式返回一个函数,内部解决了this指向的问题,event对象传递的问题 function debounce(func, wait) { var timeout; return function () { var context = this; var args = arguments; clearTimeout(timeout) timeout = setTimeout(function () { func.apply(context, args) }, wait); }; };②立即触发问题 //首次触发执行,再次触发以后开始执行防抖函数 //使用的时候不用重复执行这个函数,本身返回的函数才具有防抖功能function debounce(func, wait, immediate) { var timeout; return function () { var context = this; var args = arguments; if(timeout) clearTimeout(timeout); // 是否在某一批事件中首次执行 if (immediate) { var callNow = !timeout; timeout = setTimeout(function() { timeout = null; func.apply(context, args) immediate = true; }, wait); if (callNow) { func.apply(context, args) } immediate = false; } else { timeout = setTimeout(function() { func.apply(context, args); immediate = true; }, wait); } }}③返回值问题function debounce(func, wait, immediate) { var timeout, result; return function () { var context = this, args = arguments; if (timeout) clearTimeout(timeout); if (immediate) { var callNow = !timeout; timeout = setTimeout(function() { result = func.apply(context, args) }, wait); if (callNow) result = func.apply(context, args); } else { timeout = setTimeout(function() { result = func.apply(context, args) }, wait); } return result; }}④取消防抖,添加cancel方法function debounce(func, wait, immediate) { var timeout, result; function debounced () { var context = this, args = arguments; if (timeout) clearTimeout(timeout); if (immediate) { var callNow = !timeout; timeout = setTimeout(function() { result = func.apply(context, args) }, wait); if (callNow) result = func.apply(context, args); } else { timeout = setTimeout(function() { result = func.apply(context, args) }, wait); } return result; } debounced.cancel = function(){ cleatTimeout(timeout); timeout = null; } return debounced;}五、节流Throttle(1)节流Throttle情景

①图片懒加载

②ajax数据请求加载

(2)节流原理

如果持续触发事件,每隔一段时间只执行一次函数。

官方解释:当持续触发事件时,保证一定时间段内只调用一次事件处理函数。

(3)节流实现—时间戳和定时器时间戳 var throttle = function (func, delay) { var prev = Date.now() return function () { var context = this; var args = arguments; var now = Date.now(); if (now - prev >= delay) { func.apply(context, args); prev = Date.now(); } } } function handle() { console.log(Math.random()); } window.addEventListener('scroll', throttle(handle, 1000));定时器 var throttle = function (func, delay) { var timer = null; return function () { var context = this; var args = arguments; if (!timer) { timer = setTimeout(function () { func.apply(context, args); timer = null; }, delay); } } } function handle() { console.log(Math.random()); } window.addEventListener('scroll', throttle(handle, 1000))(4)节流函数的演化过程①时间戳触发//在开始触发时,会立即执行一次; 如果最后一次没有超过 wait 值,则不触发function throttle(func, wait) { var context, args; var previous = 0; // 初始的时间点,也是关键的时间点 return function() { var now = +new Date(); context = this; args = arguments; if (now - previous > wait) { func.apply(context, args); previous = now; } }}②定时器触发//首次不会立即执行,最后一次会执行,和用时间戳的写法互补。function throttle(func, wait){ var context, args, timeout; return function() { context = this; args = arguments; if(!timeout) { timeout = setTimeout(function(){ func.apply(context, args); timeout = null; }, wait); } }}③结合时间戳和定时器function throttle(func, wait) { var timer = null; var startTime = Date.now(); return function(){ var curTime = Date.now(); var remaining = wait-(curTime-startTime); var context = this; var args = arguments; clearTimeout(timer); if(remaining<=0){ func.apply(context, args); startTime = Date.now(); }else{ timer = setTimeout(fun, remaining); // 如果小于wait 保证在差值时间后执行 } }}六、节流防抖总结

防抖:原理是维护一个定时器,将很多个相同的操作合并成一个。规定在delay后触发函数,如果在此之前触发函数,则取消之前的计时重新计时,只有最后一次操作能被触发。

节流:原理是判断是否达到一定的时间来触发事件。某个时间段内只能触发一次函数。

区别:防抖只会在最后一次事件后执行触发函数,节流不管事件多么的频繁,都会保证在规定时间段内触发事件函数。

本文链接地址:https://www.jiuchutong.com/zhishi/300417.html 转载请保留说明!

上一篇:JS实现轮播图(一看就懂逻辑清晰)(js轮播图视频教程)

下一篇:Vue中 provide、inject 详解及使用

  • 成为运营大咖的4个学习面(运营大亨)

    成为运营大咖的4个学习面(运营大亨)

  • 从微信转到支付宝怎么转(从微信转到支付宝怎么转没有银行卡)

    从微信转到支付宝怎么转(从微信转到支付宝怎么转没有银行卡)

  • 华为matepad11可以插电话卡吗(华为matepad11可以连接键盘吗)

    华为matepad11可以插电话卡吗(华为matepad11可以连接键盘吗)

  • 快手上怎么找到关注的人(快手上怎么找到微信好友)

    快手上怎么找到关注的人(快手上怎么找到微信好友)

  • 手机手电筒开一晚上没事吧(手机手电筒开一夜会爆炸吗)

    手机手电筒开一晚上没事吧(手机手电筒开一夜会爆炸吗)

  • 按存储器的功能或工作方式可分为(按存储器在计算机中的作用,存储器可分为哪向类)

    按存储器的功能或工作方式可分为(按存储器在计算机中的作用,存储器可分为哪向类)

  • 耳机接口type c是什么意思(耳机接口类型 typec)

    耳机接口type c是什么意思(耳机接口类型 typec)

  • 淘宝中评对卖家的影响(淘宝中评对卖家有用吗)

    淘宝中评对卖家的影响(淘宝中评对卖家有用吗)

  • 淘宝直播名字前面皇冠什么意思(淘宝直播名字前面红色)

    淘宝直播名字前面皇冠什么意思(淘宝直播名字前面红色)

  • 电脑windows什么意思(电脑win几)

    电脑windows什么意思(电脑win几)

  • 华硕笔记本充不进去电怎么回事(华硕笔记本充不满电是什么问题)

    华硕笔记本充不进去电怎么回事(华硕笔记本充不满电是什么问题)

  • 抖音未满十八岁能不能直播(抖音未满十八岁可以实名认证吗)

    抖音未满十八岁能不能直播(抖音未满十八岁可以实名认证吗)

  • 电脑开机后图标显示不出来怎么办(电脑开机后图标位置老是乱)

    电脑开机后图标显示不出来怎么办(电脑开机后图标位置老是乱)

  • iphoneios11支持otg吗

    iphoneios11支持otg吗

  • iphone保修需要发票吗(iphone保修要发票么)

    iphone保修需要发票吗(iphone保修要发票么)

  • 候补购票退款几天到账(候补购票退款多久到账)

    候补购票退款几天到账(候补购票退款多久到账)

  • outlook中smtp协议是指(outlook的smtp服务器)

    outlook中smtp协议是指(outlook的smtp服务器)

  • 微信怎么收藏聊天记录(微信怎么收藏聊天内容)

    微信怎么收藏聊天记录(微信怎么收藏聊天内容)

  • obj文件怎么打开(文件dwg格式怎么打开)

    obj文件怎么打开(文件dwg格式怎么打开)

  • vivo手机lte什么意思(vivo lte手机开关在哪里)

    vivo手机lte什么意思(vivo lte手机开关在哪里)

  • 苹果xs怎么放两张卡(苹果xs怎么用两张卡)

    苹果xs怎么放两张卡(苹果xs怎么用两张卡)

  • 苹果xsmax屏幕是不是2k(苹果xsmax是什么屏幕)

    苹果xsmax屏幕是不是2k(苹果xsmax是什么屏幕)

  • 苹果手表怎么改时间(苹果手表怎么改密码)

    苹果手表怎么改时间(苹果手表怎么改密码)

  • 无需物流发货什么意思(无需物流发货会有什么处罚)

    无需物流发货什么意思(无需物流发货会有什么处罚)

  • tik tok国际版怎么用(tiktok国际版怎么看)

    tik tok国际版怎么用(tiktok国际版怎么看)

  • ps液化快捷键(ps液化快捷键变成截屏)

    ps液化快捷键(ps液化快捷键变成截屏)

  • 手机不能接打电话是什么原因(手机不能接打电话怎么设置)

    手机不能接打电话是什么原因(手机不能接打电话怎么设置)

  • b4,b5纸尺寸(b4纸张尺寸)

    b4,b5纸尺寸(b4纸张尺寸)

  • 织梦手机网站如何更新?(织梦系统网站搭建教程)

    织梦手机网站如何更新?(织梦系统网站搭建教程)

  • 小规模免征增值税额度2023
  • 进项税额转出需要结转吗
  • 软件企业减免企业所得税
  • 进口环节应纳消费税的计税依据为
  • 个人股权激励收入申报
  • 个税和社保基数不一致会影响上海落户吗
  • 母公司帮子公司偿还债务
  • 纳税人多缴税款的退还期限
  • 物流企业信用评级
  • 买一手房需要交哪些税费
  • 食堂收支情况
  • 生产经营所得如何缴纳个人所得税
  • 存货取得长期股权投资
  • 另一个公司代付公司的水电费
  • 进项税当期已转出能调整再抵扣吗?
  • 企业所得税弥补亏损年限
  • 跨地区经营怎么交税
  • 企业怎么办税
  • 物业管理公司如何纳税
  • 税控盘锁死还能报税吗
  • 政策性搬迁税收政策指引
  • 解析居民企业非货币性资产对外投资政策
  • 购物车内广告收入应该怎么缴税?
  • 半变动成本和延期成本的区别
  • 商品和安装能开什么发票
  • 主板外部接口是用来连接
  • 如何在Excel中进行数据筛选
  • koeids.dll
  • 分配股利什么时候做账
  • mce文件是什么软件
  • 保险中介市场现状和基本特点
  • php加密文件解密
  • 购买方收到红字发票如何冲成本
  • 百度地图api的使用
  • v_if和v_for
  • Vue3 script setup 语法糖详解
  • 帝国cms建站实例教程
  • 从银行提取现金50000元备发工资
  • 税盘显示已反写
  • 个税借方的含义
  • Vite + Vue2 + Vuetify2 + <script setup> + TypeScript 搭配开发项目
  • 套期保值是什么意思举个例子
  • 仓库物资盘盈盘亏怎么办
  • 有限合伙企业中谨慎有限合伙人的应当
  • 企业广告费以后会涨吗
  • 子公司注销母公司收回现金流
  • 企业的银行转账多久到账
  • 公司视同销售产品确认收入分录?
  • 固定资产计提完折旧报废的账务处理
  • 工程施工企业的会计科目如何设置
  • 结算本月应付职工工资,其中生产工人工资8000元
  • 其他应收款款项性质如何填写
  • 索引的基本原则
  • win2003设置网络共享
  • mac电脑如何下载app
  • Win10 Mobile 10572预览版上手体验视频
  • debian openssh
  • win8 preview
  • Linux系统安全配置包括
  • win10系统如何去除记住密码
  • win7系统耳机设置在哪里
  • win10系统onenote不能用
  • js添加列表项
  • Android屏幕外侧滑条
  • cocos2dx官方教程
  • viewpager2+fragment
  • android新手入门
  • bat批处理的if里面双感叹号
  • boostrapping
  • python多线程菜鸟教程
  • python 线程教程
  • jQuery+formdata实现上传进度特效遇到的问题
  • 发布python程序
  • 网上申报成功怎么查询
  • 抓落实韧劲不足的具体表现
  • 北京930末班车时间表
  • 江西省国家税务局发票查询
  • 安徽国家税务局网上办税平台12366
  • 如何查询车辆购买的保险是哪家保险公司
  • 购置税周天上班吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设