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

  • 腾讯课堂下载的视频如何在腾讯课堂app端内播放(腾讯课堂下载的文件在哪个文件下)

    腾讯课堂下载的视频如何在腾讯课堂app端内播放(腾讯课堂下载的文件在哪个文件下)

  • 苹果12电池百分比在哪里设置(苹果12电池百分比在哪调节)

    苹果12电池百分比在哪里设置(苹果12电池百分比在哪调节)

  • iqooneo5是金属边框吗(iqooneo是金属中框吗)

    iqooneo5是金属边框吗(iqooneo是金属中框吗)

  • 腾讯视频怎样下载超清视频(腾讯视频怎样下载到电脑桌面上)

    腾讯视频怎样下载超清视频(腾讯视频怎样下载到电脑桌面上)

  • 小程序提示微信版本过低(小程序提示微信版本过低无法更新)

    小程序提示微信版本过低(小程序提示微信版本过低无法更新)

  • 陌陌动态可以发广告吗(陌陌动态可以发语音吗)

    陌陌动态可以发广告吗(陌陌动态可以发语音吗)

  • 小米8应购买哪种数据线(小米8手机哪款性价比高)

    小米8应购买哪种数据线(小米8手机哪款性价比高)

  • 5g是第几代通信技术标准(5g是指第五代)

    5g是第几代通信技术标准(5g是指第五代)

  • 路由器断流怎么解决(无线路由器 断流)

    路由器断流怎么解决(无线路由器 断流)

  • 快充是充电头还是数据线(快充是充电头还是手机的作用)

    快充是充电头还是数据线(快充是充电头还是手机的作用)

  • 手机不贴膜行不行(手机不贴膜没事吧)

    手机不贴膜行不行(手机不贴膜没事吧)

  • 为什么cad填充的时候特别卡(为什么cad填充的图很模糊)

    为什么cad填充的时候特别卡(为什么cad填充的图很模糊)

  • 微信注册新号为什么辅助验证通不过(微信注册新号为什么短信验证通不过)

    微信注册新号为什么辅助验证通不过(微信注册新号为什么短信验证通不过)

  • vivoy5s有没有红外线(vivoy5s有没有红外线怎么遥控空调)

    vivoy5s有没有红外线(vivoy5s有没有红外线怎么遥控空调)

  • 抖音开直播怎么放音乐(抖音开直播怎么设置不让别人看)

    抖音开直播怎么放音乐(抖音开直播怎么设置不让别人看)

  • oppor17机身长为多少(oppor17机身长度和宽度)

    oppor17机身长为多少(oppor17机身长度和宽度)

  • 小米手环4nfc上市时间(玩转小米手环4nfc)

    小米手环4nfc上市时间(玩转小米手环4nfc)

  • 抖音企业认证需要什么资料(抖音企业认证需要多少费用)

    抖音企业认证需要什么资料(抖音企业认证需要多少费用)

  • 华为密码保险箱在哪(华为密码保险箱怎么添加应用)

    华为密码保险箱在哪(华为密码保险箱怎么添加应用)

  • 苹果a13芯片有多快(苹果a13芯片有多重啊)

    苹果a13芯片有多快(苹果a13芯片有多重啊)

  • 华为手机录屏如何不要显示顶部时间(华为手机录屏如何录制系统声音)

    华为手机录屏如何不要显示顶部时间(华为手机录屏如何录制系统声音)

  • 交管12123可以微信支付吗(交管12123可以微信缴费吗)

    交管12123可以微信支付吗(交管12123可以微信缴费吗)

  • 陌陌没有语音通话吗(陌陌没有语音通话功能)

    陌陌没有语音通话吗(陌陌没有语音通话功能)

  • oppo手机电话录音在哪里找出来(oppo手机电话录音存在哪个文件夹)

    oppo手机电话录音在哪里找出来(oppo手机电话录音存在哪个文件夹)

  • vivos1左侧按键干啥用的(vivos1手机左边的按键是干嘛的)

    vivos1左侧按键干啥用的(vivos1手机左边的按键是干嘛的)

  • mate20pro指纹在哪里(mate20pro的指纹)

    mate20pro指纹在哪里(mate20pro的指纹)

  • iwatch怎么配对(iwatch怎么配对iPhone)

    iwatch怎么配对(iwatch怎么配对iPhone)

  • 今日头条如何申请原创(今日头条如何申请认证)

    今日头条如何申请原创(今日头条如何申请认证)

  • Mac开机提示音回归 一条sudo命令轻松搞定(mac开机声音取消)

    Mac开机提示音回归 一条sudo命令轻松搞定(mac开机声音取消)

  • windows系统进程终止方法详解(window10进程)

    windows系统进程终止方法详解(window10进程)

  • Win11如何调整鼠标速度?Win11调整鼠标速度方法(win11如何调整鼠标中键)

    Win11如何调整鼠标速度?Win11调整鼠标速度方法(win11如何调整鼠标中键)

  • 企业借款给个人利息如何处理
  • 安全生产费实际发生必须是付款吗还是挂帐也可以
  • 为什么要结转发出材料成本差异
  • 合作社需要办什么证件
  • 通用机打发票怎么红冲
  • 分公司企业所得税汇总缴纳还是单独缴纳
  • 企业增资认缴是什么意思
  • 销售土地如何交增值税
  • 由于汇率引起汇兑损益计入哪个科目?
  • 滞留发票是什么意思
  • 增值税发票提示文件不匹配
  • 股息率超过10%的公司
  • 不抵扣勾选怎么挽回
  • 领用原材料的会计分录
  • 办理核定企业所需资料
  • 专用发票超过360天作废
  • 跨年度暂估未取得发票如何处理
  • 暂估冲红的分录怎么写
  • ntfs磁盘压缩
  • 收到工会经费怎样做账
  • macos catalina与macos big区别
  • 代开的发票没有人名行不行?
  • 如何在Windows 11上卸载更新
  • umi ts
  • 非货币性资产投资特殊性税务处理
  • 企业财务管理内部控制问题与应对策略
  • 车船税不计提怎么做分录
  • thinkphp3.0
  • vue3.0创建
  • collection的属性
  • pgrep命令作用及含义
  • 利润分配的顺序依次是什么
  • 财政补助收入分录
  • 泛化的理解
  • 设备 融资租赁
  • 小规模纳税人每月不超过10万
  • 资产负债表上应付账款根据什么填制
  • 食品财务走账
  • 供应商退款需要冲库存商品吗
  • 房屋租赁发票品目填写规范
  • 小规模超过30万怎么交增值税
  • 备用金用发票核销去哪核销
  • 残疾人保障金需要联系专管员吗
  • 金税四期能监控到公户吗
  • 已计提的城建税有误,怎么办
  • 已纳消费税扣除会计分录
  • 资产负债表是怎么核对的
  • 公司租赁职工车辆账务处理
  • 固定资产的修理费属于什么费用
  • 应付账款会计分录怎么写
  • 七天年化收益率2%
  • 工厂用的工具放计入哪个科目
  • 其他业务收入在利润表中怎么填写
  • 水果销售公司怎么起名字好听
  • 银行固定资产有哪些
  • 房子装修费要交税吗
  • 会计账簿的设计意义
  • sql游标用法
  • windows server 2003如何安装
  • daio.dll 病毒
  • windows自带软件有哪些
  • Nymse.exe - Nymse是什么进程 有何作用
  • win10提醒功能
  • ubuntu20安装unity桌面
  • jsoncpp rapidjson
  • android的intent介绍
  • 每次开机windows桌面更新
  • javascript运用
  • 去掉字符串中的某个值
  • linux进程监控方法
  • Unity3D游戏开发(第2版)pdf
  • 使用java
  • 安卓xml存储方式
  • mysql里多表查询语句怎么写
  • python3中raw_input的用法
  • 国家税务局湖南省电子税务局app下载
  • 广告费属于什么会计科目
  • 广东省电子税务局官网登录入口
  • 两利四率完成情况
  • 西安市地方税务局高新技术产业开发区分局
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设