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

  • 华为mate40pro怎么设置指纹解锁(华为mate40pro怎么无线充电)

    华为mate40pro怎么设置指纹解锁(华为mate40pro怎么无线充电)

  • vivox50和x50pro的区别(vivox50与x50pro的区别)

    vivox50和x50pro的区别(vivox50与x50pro的区别)

  • 三星s10+发热严重(三星s10+发热严重怎么办)

    三星s10+发热严重(三星s10+发热严重怎么办)

  • 微信的消息有已读提示吗(微信的消息有已读提醒吗)

    微信的消息有已读提示吗(微信的消息有已读提醒吗)

  • 微信怎么拉非好友进群(微信怎么拉非好友进群聊)

    微信怎么拉非好友进群(微信怎么拉非好友进群聊)

  • vivov1801a0是什么型号(vivov1809a什么手机)

    vivov1801a0是什么型号(vivov1809a什么手机)

  • 微信步数准确吗(微信步数准确吗 为什么一天都没增加)

    微信步数准确吗(微信步数准确吗 为什么一天都没增加)

  • 淘宝客是什么软件(淘宝客是干嘛用的)

    淘宝客是什么软件(淘宝客是干嘛用的)

  • 通话背景图片怎么设置(通话背景图片怎么取消)

    通话背景图片怎么设置(通话背景图片怎么取消)

  • 淘宝店铺降权多久恢复正常(淘宝店铺 降权)

    淘宝店铺降权多久恢复正常(淘宝店铺 降权)

  • 键盘caps灯亮怎么关(键盘caps灯亮怎么开)

    键盘caps灯亮怎么关(键盘caps灯亮怎么开)

  • 怎么把朋友的微信名片发给别人(怎么把朋友的微信转到朋友圈)

    怎么把朋友的微信名片发给别人(怎么把朋友的微信转到朋友圈)

  • 快手误删评论怎么恢复(快手误删评论怎么找回)

    快手误删评论怎么恢复(快手误删评论怎么找回)

  • iphone8p怎么清理系统内存(苹果8p怎样清理)

    iphone8p怎么清理系统内存(苹果8p怎样清理)

  • iphone gps设置在哪里(ios gps设置)

    iphone gps设置在哪里(ios gps设置)

  • 苹果游戏充值退款后充值的道具还收回吗(苹果游戏充值退款绝对成功的理由)

    苹果游戏充值退款后充值的道具还收回吗(苹果游戏充值退款绝对成功的理由)

  • 如何制作带pe功能的u盘(自制pe工具箱)

    如何制作带pe功能的u盘(自制pe工具箱)

  • 抖音怎么加速本地视频(抖音怎么加速度)

    抖音怎么加速本地视频(抖音怎么加速度)

  • 荣耀手表健康三环解释(荣耀v30运动健康)

    荣耀手表健康三环解释(荣耀v30运动健康)

  • 抖音谁看过我有痕迹吗(抖音,谁看过我)

    抖音谁看过我有痕迹吗(抖音,谁看过我)

  • xp系统任务栏怎么还原底部

    xp系统任务栏怎么还原底部

  • 华为三键设置在哪(华为智能手机怎么设置三键)

    华为三键设置在哪(华为智能手机怎么设置三键)

  • iwatch4怎么发微信(iphonewatch怎么发微信)

    iwatch4怎么发微信(iphonewatch怎么发微信)

  • xr有没有nfc(xr有没有nfc功能)

    xr有没有nfc(xr有没有nfc功能)

  • 最新win11教育版激活密钥分享 附win11激活工具(winds10教育版)

    最新win11教育版激活密钥分享 附win11激活工具(winds10教育版)

  • React--》useReducer的讲解与使用(react reducer详解)

    React--》useReducer的讲解与使用(react reducer详解)

  • 逾期未申报是什么意思
  • 一般纳税人发生特定应税销售行为
  • 一般纳税人购买二手车可以抵扣嘛
  • 存在弃置费用的固定资产的财务费用
  • 固定资产接受捐赠的计入什么科目
  • 垃圾处理费怎么算
  • 合并报表盈余公积等于母公司盈余公积
  • 长期股权投资其他综合收益借贷方向
  • 公司自用车辆出售如何交税
  • 没开发票的收入可以不入账吗
  • 调整凭证分录
  • 房地产预交税金及附加要计提吗
  • 增值税是先交税还是先开票
  • 购买无形资产的价款超过正常信用
  • 持有至到期投资属于什么科目
  • 3%税率是一般纳税人还是小规模
  • 非独立核算的分公司怎么做账
  • 购买化妆品可以税前扣除吗
  • 新领的发票怎么读入开票系统
  • 商品按照售价金额核算法进行日常核算
  • 个人应纳税所得额怎么算
  • 相互调转总分公司的原料物资 是视同销售吗?
  • 增值税税率调整时间16变13
  • 房屋产权无偿赠与合同范本
  • 怎样取得个人所得税
  • 内外账合并步骤
  • 税率抵扣计算公式
  • 摊销房租费如何做账
  • php生成文件流
  • macOS Big Sur 11.2 开发者预览版 Beta如何更新?
  • PHP:session_cache_expire()的用法_Session函数
  • 固定资产加速折旧方法
  • 目标检测如何入门
  • Python 高性能 pdf
  • 坏账准备税收调整
  • 不是吧阿sir表情包
  • 负数发票的销售成本怎么做?
  • 刚成立的新公司怎么报税
  • 外籍专家劳务费
  • 停车场广告收入需要每年缴纳增值税吗?
  • 银行回单箱费会退回吗
  • python 文件判断
  • 当月工资未发放的怎么记账
  • 辅助生产车间照明费用计入什么科目
  • 福利用品可以抵增值税吗
  • 本年利润的会计编码
  • sql中多条件查询
  • 车辆计提折旧需要结转吗
  • 公司账户钱取出来税务局会查账吗
  • 应交税金期末为负数
  • 其他收益结转到什么科目
  • 以前年度损益调整在利润表中怎么填
  • 应交税金的负数重分类
  • 退税勾选选成抵扣勾选怎么办
  • 工业营业收入含税吗
  • 微软宣布Q3推出MRTKV3工具包
  • 设置动态壁纸来电铃声
  • vsftpd.service disabled
  • freebsd重置密码
  • linux怎样安装
  • linux系统中文件权限分为哪三种
  • win8设置关机键
  • 提示无法启动打印作业
  • centos如何操作
  • 密钥升级win10专业版有问题吗
  • linux常见shell命令
  • windows10专业版界面预览
  • 在对linux系统中dir
  • centos 安装chia
  • 如何在win7上打开win10软件
  • win8电脑键盘全部失灵怎么办
  • shell自动化
  • dos常用命令详细讲解
  • python字符串strip的作用
  • 使用驱动器u盘之前需要格式化
  • python append、extend与insert的区别
  • pjblog修改技巧汇总
  • 国家税务总局会议管理办法
  • 地税局 要官
  • 北京中关村海淀医院属于北京几环?
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设