函数节流的作用

函数节流优化前端性能
在高频率操作引发页面性能问题背景下,本文介绍如何利用函数节流技术避免重复调用,提升前端应用性能。通过设置定时器,确保函数在执行后的一段时间内不再响应触发事件,有效防止了频繁调用导致的资源浪费。

以前写代码没有考虑到性能的问题,在被测试疯狂的点击和轰炸下,页面出现了严重的数据问题

分析一:页面数据量比较大,当点击的时候还没有加载好,又发送了一次请求

分析二:按钮被疯狂事的点击

为了解决这个这个问题,想起来了函数节流的作用

函数节流就是针对调用频率高的函数,通过设置定时器,使其在执行后间隔一段时间,才进行下一次的执行,避免重复频繁的调用导致的浏览器性能以及ajax重复调用问题。

话不多说上代码:

             var timer=null
            if(this.timer){
                  clearTimeout(this.timer)
              }
              this.timer=setTimeout(()=>{
                //这里面写上事件触发的逻辑
              },20)     

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值