大纲

一、出现缘由

二、什么是防抖debounce和节流throttle

三、应用场景

3.1防抖

3.2节流

一、出现缘由

前端开发中,有一部分用户行为会频繁触发事件,而对于DOM操作,资源加载等耗费性能的处理,很可能导致卡顿,甚至浏览器崩溃,防抖和节流就是为了这一类的问题出现的前端优化技术。

二、什么是防抖debounce和节流throttle

防抖debounce是函数在规定延迟时间内不被调用,才能再次被调用,如果在规定时间内调用,延迟重新开始计算;

节流throttle是在规定的延迟时间间隔后,函数才执行一次,以固定的频率被触发。

三、简单实现

3.1防抖

连续触发事件的时候,不会有任何反应,停止触发事件的多少秒,就会执行,在延迟时间内执行函数,就重新开始一个定时器。

function debounce(func,delay=300,timer=null){return (...args){clearTimeout(timer);timer=setTimeout(func.bind(null,...args,delay);)}
}
function query(){//ajax
}
input.addEventListener('keyup',debounce(query))

  

3.2节流

触发事件的时候,执行一个函数,在之后的一段时间内进这个函数,会被return,真正的逻辑不能执行,定时器在一定时间后重置开关,再进来就能再次执行真正的逻辑了。

function throttle(func,delay=60){let lock=false;return (...args)=>{if(lock)reutrn;function(..args);lock=true;setTimeout(()=>lock=false,delay);}
}
function query(){//ajax
}
decument.addEventListener('scroll',throttle(query));

  

四、应用场景

3.1防抖throttle的应用场景

防抖适用于window.onscroll事件,等到拉动动作结束后再触发一个事件,或者拖拽

    _.throttle=function(func,wait,options){var context,args,result;var timeout=null;var previous0;if(!options)options={}var later=function(){previous=options.leading===false:0:new Date();timeout=null;result=func.apply(context,args);if(!timeout)context=args=null;}return fucntion(){var now=new Date();if(!previous && option.leading===false)previous=now;var remaining=wait-(now-previous);context=this;args=arguments;if (remaining <= 0 || remaining > wait) {if (timeout) {clearTimeout(timeout);timeout = null;}previous = now;result = func.apply(context, args);if (!timeout) context = args = null;} else if (!timeout && options.trailing !== false) {timeout = setTimeout(later, remaining);}return result;}}

  

3.2节流throttle的应用场景

下面具体讲一个例子

假设我们网站有一个搜索框,用户输入文本我们自动会联想匹配除一些结果供用户选择,我首先想到的做法是监听keypress事件或change事件,然后ajax请求数据,但是当用户快速输入的时候,就会瞬间触发一连串的请求,这无疑不是我们想要的,我们想要的是用户停止输入的时候才去触发查询的请求,这时候函数防抖可以帮助我们。

_.throttle=function(func,wait,immediate){var timeout,args,context,timestamp,result;var later=function(){  //如果没有超过等待时间,就接着设置一个定时器,时间是delay的时间减去方法执行的时间var last=new Date().getTime() - timestamp;if(last<wait && last>=0){timeout=setTimeout(later,wait-last);}else{   //如果已经过wait时间了,就直接清除定时器,给result赋值clearTimeout(timeout);if(!immediate){result=func.apply(context.args);if(!timeout)context=args=null;}}}return function(){context=this;args=arguments;timestamp=new Date().getTime();var callNow=immediate && timeout;    //如果是立即执行或者之前执行过还没过延迟时间if(!timeout)timeout=setTimeout(later,wait);   //如果之前没执行过,现在开始定时任务,如果执行过,timeout存在,就返回个空的result.if(callNow){   //如果是立即执行,就立即执行fn,这时候console.log(1);result=func.apply(context,args);context=args=null;}return result;}}function query(){//ajaxconsole.log('ajax');}$("#search").keypress(_.throttle(query,300));

  

转载于:https://www.cnblogs.com/learnings/p/9543782.html

防抖debounce和节流throttle相关推荐

  1. 函数防抖(debounce)和节流(throttle)在H5编辑器项目中的应用

    函数防抖(debounce)和节流(throttle)在H5编辑器项目中的应用 文章目录 函数防抖(debounce)和节流(throttle)在H5编辑器项目中的应用 1. 为什么要防抖节流 1.1 ...

  2. 探究防抖(debounce)和节流(throttle)

    本文来自我的博客,欢迎大家去GitHub上star我的博客 本文从防抖和节流出发,分析它们的特性,并拓展一种特殊的节流方式requestAnimationFrame,最后对lodash中的deboun ...

  3. Java版的防抖(debounce)和节流(throttle)

    概念 防抖(debounce) 当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定时间到来之前,又触发了事件,就重新开始延时 节流(throttle) 当持续触发事件时, ...

  4. 函数防抖(debounce)和节流(throttle)以及lodash的debounce源码赏析

    函数节流和去抖的出现场景,一般都伴随着客户端 DOM 的事件监听.比如scroll resize等事件,这些事件在某些场景触发非常频繁. 比如,实现一个原生的拖拽功能(不能用 H5 Drag& ...

  5. 手写防抖(debounce)和节流(throttle)

    目录 测试代码 防抖(debounce) 基本功能实现 添加参数及this指向功能 第一次立即执行功能 取消功能 节流(throttle) 基本功能实现 增加this执向 最后一次在禁止时间段内是否执 ...

  6. 函数防抖debounce和节流throttle

    debounce 函数防抖 1.什么是函数防抖 函数防抖是优化高频率执行 js 代码的一种手段 可以让被调用的函数在一次连续的高频率操作过程中只被调用一次 2.函数防抖的作用 减少代码执行次数,提升网 ...

  7. 防抖(debounce)和节流(throttle)

    针对一些会频繁触发的事件如scroll.resize,如果正常绑定事件处理函数的话,有可能在很短的时间内多次连续触发事件,十分影响性能.防抖和节流就是针对响应跟不上触发频率这类问题的两种解决方案 因此 ...

  8. 防抖(debounce) 和 节流(throttling)

    防抖和节流是针对响应跟不上触发频率这类问题的两种解决方案. 在给DOM绑定事件时,有些事件我们是无法控制触发频率的. 如鼠标移动事件onmousemove, 滚动滚动条事件onscroll,窗口大小改 ...

  9. 防抖(debounce) 和 节流(throttling)的封装使用-最终发布npm

    函数的防抖节流 前言 防抖函数 防抖函数(雏形) 防抖函数1.0(使用了闭包) 防抖函数2.0(此版本开始才称得上是封装) 防抖函数3.0(希望第一次点击就立即触发) 防抖函数4.0(解决this指向 ...

最新文章

  1. SaltStack自动化运维(三)——Grains与Pillar组件
  2. 在Python中读取MATLAB的数据文件
  3. PHP cURL可以在单个请求中检索响应标头和正文吗?
  4. eclipse如何使用log4j详解,你get了吗???
  5. 实现多线程Callable接口
  6. linux更新软件载入缓存后停止_linux 中缓存怎样清除
  7. 巴比特观察 | NFT朋克热潮:CryptoPunks的成功可以复制吗
  8. 新编密码学——分组密码
  9. 第19篇:关于近期cs服务端被反打的原因分析
  10. 球半篮球比分,西篮甲:沙萨基 VS 华伦西亚 5月31日
  11. vue3+element-plus动态设置字体大小
  12. php教育网站设计案例_课程教学网站的设计与实现(MySQL)(含录像)
  13. 启动车子温车_车子启动后水温上的很快是什么原?
  14. Polar码(1)— 基础理论
  15. 用计算机升级ipad系统软件,ipad如何升级系统 三大方法推荐【图解】
  16. 栈内存 堆内存 (数据类型间的存储区别)
  17. 数据脱敏(Data Masking)学习
  18. [MCSM] Slice Sampler
  19. pyboard 实验遥控LED灯
  20. 重新认识史蒂夫·乔布斯

热门文章

  1. ARM 移植 PPPD
  2. python 3.9特性,开发者应该知道的Python 3.9新特性
  3. vim编辑模式_sublime vim模式和快捷键
  4. vue1升级到vue2的问题
  5. [转载]如何判断js中的数据类型
  6. 隐隐约约 听 RazorEngine 在 那里 据说 生成代码 很 美。
  7. Aptana插件安装到eclipse和myeclipse的详细过程
  8. 作业自动提示功能设计思路
  9. Discuz! 防御CC攻击的设置办法
  10. [Cocoa]深入浅出Cocoa之Core Data(2)- 手动编写代码