位置: 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 详解及使用

  • 我的公号到底什么时间推送效果最好?(我的公众号是什么)

    我的公号到底什么时间推送效果最好?(我的公众号是什么)

  • 微博能单独一条屏蔽某个人吗(微博单独一条屏蔽某个人)

    微博能单独一条屏蔽某个人吗(微博单独一条屏蔽某个人)

  • 抖音播放不了的原因(抖音播放不了视频怎么办)

    抖音播放不了的原因(抖音播放不了视频怎么办)

  • 华为手机拆电池技巧(华为手机拆电池可以用电源)

    华为手机拆电池技巧(华为手机拆电池可以用电源)

  • 闲鱼怎么隐藏会员名(闲鱼怎么隐藏会员)

    闲鱼怎么隐藏会员名(闲鱼怎么隐藏会员)

  • 苹果查找朋友未找到位置(iphone查找朋友找不到位置)

    苹果查找朋友未找到位置(iphone查找朋友找不到位置)

  • 苹果11控制中心怎么设置从下面划出来(苹果11控制中心拉不出来怎么办)

    苹果11控制中心怎么设置从下面划出来(苹果11控制中心拉不出来怎么办)

  • 彩虹屏是什么屏幕(彩虹屏幕是啥)

    彩虹屏是什么屏幕(彩虹屏幕是啥)

  • 华为网速慢(华为网速慢怎么办 解决办法)

    华为网速慢(华为网速慢怎么办 解决办法)

  • 小爱音箱能当蓝牙音箱用吗(小爱音箱能当蓝牙遥控器用吗)

    小爱音箱能当蓝牙音箱用吗(小爱音箱能当蓝牙遥控器用吗)

  • 计算机网络安全策略是指(计算机网络安全的定义)

    计算机网络安全策略是指(计算机网络安全的定义)

  • 苹果手机网不好怎么办(苹果手机网不好飞行模式一下又有网)

    苹果手机网不好怎么办(苹果手机网不好飞行模式一下又有网)

  • i5 9400f配什么主板(i5 9400f配什么主板性能最好)

    i5 9400f配什么主板(i5 9400f配什么主板性能最好)

  • opporeno3pro微信视频美颜怎么设置(opporeno3pro微信视频聊天卡)

    opporeno3pro微信视频美颜怎么设置(opporeno3pro微信视频聊天卡)

  • 钉钉打卡时间能不能修改(钉钉打卡时间能看到秒吗?)

    钉钉打卡时间能不能修改(钉钉打卡时间能看到秒吗?)

  • 微信聊天记录不删除能保存多久(微信聊天记录不显示怎么设置)

    微信聊天记录不删除能保存多久(微信聊天记录不显示怎么设置)

  • oppor17长度多少(oppor17长多少厘米)

    oppor17长度多少(oppor17长多少厘米)

  • 夏普打印机怎么缩印(夏普打印机怎么复印身份证)

    夏普打印机怎么缩印(夏普打印机怎么复印身份证)

  • oppoa57插件怎么弄(oppo怎么设置插件a57)

    oppoa57插件怎么弄(oppo怎么设置插件a57)

  • 淘气值亲情怎么算互动(淘气值亲情号怎么算互动一次)

    淘气值亲情怎么算互动(淘气值亲情号怎么算互动一次)

  • 小米手环深睡时间准确吗(小米手环深睡时长多久正常)

    小米手环深睡时间准确吗(小米手环深睡时长多久正常)

  • 探探怎么聊天打招呼(探探怎么聊天打电话)

    探探怎么聊天打招呼(探探怎么聊天打电话)

  • 淘宝7天无理由退货运费谁出(淘宝7天无理由退换货规则)

    淘宝7天无理由退货运费谁出(淘宝7天无理由退换货规则)

  • 如何让b站锁屏也能播放(如何让b站锁屏也能播放视频)

    如何让b站锁屏也能播放(如何让b站锁屏也能播放视频)

  • vue2配置cesium详细教程(vue2 mixin)

    vue2配置cesium详细教程(vue2 mixin)

  • 车船税可以免掉吗
  • 车船税缴纳的相关知识?
  • 企业所得税退税的会计分录怎么做
  • 营业总收入包含投资收益吗
  • 委托加工物资属于企业资产吗
  • 出口退税的发票怎么做账
  • 增值税和实际缴税不符
  • 专项应付款如何核算
  • 新公司成立前期人员配置
  • 固定资产买入
  • 公司将我转到另外一家公司
  • 总公司业务分公司开票是虚开吗
  • 增值税发票过期了税金怎么办
  • 红字发票怎么做帐
  • 专票红冲后的账务处理
  • 高新企业最新政策2020
  • 公司房产税如何征收税率
  • 苹果手机键盘剪切板在哪里打开
  • 抵扣联必须当月认证吗
  • 固定资产的处理方法
  • 房地产企业预缴增值税如何申报
  • 外贸公司收汇可以收运费吗
  • 王者荣耀中甄姬的cp是谁
  • php数组函数输出《咏雪》里有多少"片"字
  • 对公网银数字证书
  • 购入已提完折旧的固定资产怎么入账
  • 基金管理人业绩报酬分配模式
  • 为什么筹建期间的开办费不属于资产
  • 语言翻译算法
  • less中使用js变量
  • imx6ul开源项目
  • 申报表中的免税销售额是收入吗
  • excel&命令
  • 私募基金成立的规模条件
  • 新增办税员需要哪些资料
  • 进项税额计入其他流动资产
  • 小规模纳税人定义
  • 残保金补申报后处罚会自动取消吗
  • 无偿提供建筑服务缴纳增值税
  • 什么是一般增值税纳税人
  • 工程项目买保险没有合同 情况说明怎么写
  • 管理费用算营业外支出吗
  • 上下班出车祸公司怎么赔偿
  • 预付账款的账务处理视频教程
  • 以货物抵债的会计分录
  • 因管理不善的材料怎么办
  • 企业租厂房没有发票怎么做账
  • 买公司宿舍有保障吗
  • 第三方支付利息
  • 应付账款的账务怎么处理
  • 小规模纳税人没有进项发票违法吗
  • 停车费报账
  • 增资协议书范本合同
  • 账户验证费会计分录
  • 小规模纳税人所得税优惠政策2023
  • 认证后的进项税额留抵退税
  • mysql常用功能
  • Mac OS10.11下mysql5.7.12 安装配置方法图文教程
  • windows2000开机视频
  • 无法将此电脑升级到最新版本的windows10
  • 三星笔记是干什么用的
  • winxp软件双击后没有反应
  • win8如何添加我的电脑
  • [置顶] 《诸天星河》
  • js堆栈和队列
  • [android] intent实例
  • 基于贪心算法
  • python3 args
  • javascript框架库升级
  • js新开一个窗口
  • unity api compatibility level
  • 深入理解android卷1 pdf
  • ui课程入门
  • python添加用户并加入到相应组
  • 支付宝中油好客e站怎么开发票
  • 税务总局机关
  • 落实落地是什么意思
  • 进口设备如何交税
  • 关于研发费用的审计程序,下列说法中错误的是
  • 国税发票什么意思
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设