文档章节

基于防抖和节流的性能优化

o
 osc_rmqoxylv
发布于 07/01 13:30
字数 234
阅读 27
收藏 0

精选30+云产品,助力企业轻松上云!>>>

介绍:
当下网页中的交互越来越多,很多高频事件带来的性能问题,已经是绕不过去的一个坎。怎么去优化这些高频事件,以下来基于防抖和节流的性能优化。
1、防抖和节流的概念:
防抖:就是指触发事件后在n秒内函数只能执行一次,如果在n秒内又触发了事件,则会重新计算函数执行时间。
节流:就是指连续触发事件,但是在一段时间中只执行一次函数。
2、手写防抖函数和节流函数:
2.1防抖函数





function debounce(fn,wait){
           let timmer = null;
           return function(){
               var args = arguments;
               var now = !timmer;
               timmer && clearTimeout(timmer);
               timmer = setTimeout(function(){
                   timmer = null;
               },wait);
               if(now){
                   fn.apply(this,args)
               }
           }
        }

2.2手写节流函数

function jl(fn,wait){
           let last = 0;
           return function(){
               var args = arguments;
               var now = Date.now();
               if(now - last > wait){
                   fn.apply(this,args);
                   last = now;
               }
           }
        }
上一篇: 配置互信
下一篇: oracle异常处理
o
粉丝 0
博文 57
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
基于防抖和节流的性能优化

介绍: 当下网页中的交互越来越多,很多高频事件带来的性能问题,已经是绕不过去的一个坎。怎么去优化这些高频事件,以下来基于防抖和节流的性能优化。 1、防抖和节流的概念: 防抖:就是指触...

Jeslie-He
06/30
0
0
简单实现节流函数和防抖函数,我奶奶看完都懂了

  在日常开发中有很多场景我们都需要用到节流函数和防抖函数,比如:实现输入框的模糊查询因为需要轮询ajax,影响浏览器性能,所以需要用到节流函数;实现手机号、姓名之类的的验证,往往我...

有梦想的咸鱼前端
2019/09/26
18
0
前端进击的巨人(八):浅谈函数防抖与节流

本篇课题,或许早已是烂大街的解读文章。不过春招系列面试下来,不少伙伴们还是似懂非懂地栽倒在(~面试官~)深意的笑容之下,权当温故知新。 JavaScript的执行过程,是基于栈来进行的。复...

osc_7ztcydas
2019/03/04
1
0
简单实现节流函数和防抖函数,我奶奶看完都懂了

  在日常开发中有很多场景我们都需要用到节流函数和防抖函数,比如:实现输入框的模糊查询因为需要轮询ajax,影响浏览器性能,所以需要用到节流函数;实现手机号、姓名之类的的验证,往往我...

osc_ehtwxifo
04/16
3
0
javaScript 节流与防抖

首先 我们要知道 节流与防抖可以干什么。 优化网络请求性能——节流 优化页面请求性能——防抖 举两个简单的小例子: 节流: 例如 有些购物页面,会有一些让你抢购的活动,到点的时候,需要你...

osc_apxdqf08
2019/04/22
4
0

没有更多内容

加载失败,请刷新页面

加载更多

Kafka如何在千万级别时优化JVM GC问题?

大家都知道Kafka是一个高吞吐的消息队列,是大数据场景首选的消息队列,这种场景就意味着发送单位时间消息的量会特别的大,那既然如此巨大的数据量,kafka是如何支撑起如此庞大的数据量的分发...

hummerstudio
06/18
6
0
我打赌!90%程序员都破解不了这个粽子,不信你试!

放假了 各位读者朋友们,马上就是端午小长假啦,开心激动有木有? 新的故事文章还在创作中,写了初稿感觉不太满意又推倒重来。其实写故事还是挺难的,读者可能第一次第二次有新鲜感,写多了就...

轩辕之风
06/24
20
0
如何删库跑路?教你使用Binlog日志恢复误删的MySQL数据

前言 “删库跑路”是程序员经常谈起的话题,今天,我就要教大家如何删!库!跑!路! 开个玩笑,今天文章的主题是如何使用Mysql内置的Binlog日志对误删的数据进行恢复,读完本文,你能够了解...

后端技术漫谈
01/14
22
0
PHP设计模式之代理模式

PHP设计模式之代理模式 代理人这个职业在中国有另外一个称呼,房产经济人、保险经济人,其实这个职业在国外都是叫做房产代理或者保险代理。顾名思义,就是由他们来帮我们处理这些对我们大部分...

硬核项目经理
2019/09/23
7
0
Redis的复制模式

Redis的复制功能分为同步(sync)和命令传播(command propagate)两个操作。 同步 同步操作用于将从服务器的数据库状态更新至主服务器当前所处的数据库状态。 1. 旧版本的执行步骤 从服务器...

osc_s9cni3go
22分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部