防抖和节流 含义及区别图文详解秒懂
防抖和节流都是为解决短时间内频繁触发某个功能函数而导致的性能问题。比如,触发频率过高而导致响应速度跟不上,以致出现延迟,假死或卡顿的现象。
防抖
图解:一件事情,计划5s以后触发,结果中途意外触发了,那么就重新从0开始5秒的计时,这就导致本身计划的事情就延迟触发了,当...在延迟的5秒过程当中又再次意外触发了,就继续从0开始5秒的计时,而不会执行事件处理函数,那么什么时候触发5s后的事件呢,就是不再触发的时候。
函数防抖 代码解:
看下面防抖函数,每次触发时 有定时器 就 clearTimeout 清空定时器,如果频繁触发就一直清空定时器, 等停止触发的时候,只执行最后一次定时器事件才会发送请求, 这种函数虽然会多次执行 但是最终的有效代码 只执行一次的行为 称为 防抖。
// 防抖函数
function debounce(delay) {let timer //声明一个存储定时器的变量return function () {if (timer) clearTimeout(timer) timer = setTimeout(() => {// 暂时理解不了(this,arguments)指向改变的问题// getList.call(this, arguments)getList(obj)// 不输入延迟 则默认 1000 ms}, delay || 1000)}
}
防抖后的效果:看!!!等停止触发的时候,只执行最后一次事件,就是防抖的核心。
如果停止输入但是在指定间隔内又输入,会重新触发计时。
节流
介绍:js 节流阀
通过判断是否到达一定时间来触发回调函数。
顾名思义节流,也是节省能耗的一种,防止多次频繁触发事件导致资源的不必要浪费,但是节流 是需要 有效代码会根据固定频率去执行,原理就是定义一个节流阀,在执行的事件当中打开节流阀,最重要的是在下次执行这个事件之前要判断,打开的节流阀是否存在,上次事件还存在的话就停止继续执行等待执行完毕,不存在的话就继续执行。
函数节流 代码解:
看下面节流函数,这里利用定时器演示节流效果,先定义空的定时器timer,如果有timer就中断执行,第一次执行肯定是没有timer,对timer进行定时器赋值,下面就会执行定时器中的请求,定时器中请求完成后对节流阀timer重新放开(这一步是节流的核心),每次请求完成都需要打开节流阀,只有当节流阀 timer 为null时再次点击执行事件才会进行下一次请求事件,否则重复多次点击执行事件时就会先判断之前节流阀是还存在吗,是就中断函数执行
function throttle(foo,delay){// foo-被执行节流的函数// 节流的节奏时间间隔// 初始化timer,并使用闭包访问let timer;return function(){// 若之前已有节流,中断函数执行if(timer) return;// 若(之前/此时)无节流,重新设定节流timer = setTimeout(()=>{// 暂时理解不了(this,arguments)指向改变的问题foo.call(this,arguments)// 本次节流执行后,通过给timer赋值null,释放timertimer = null// 不输入延迟 则默认 1000 ms},delay || 1000)}//也可以设置节流阀为布尔值或者是一个变量,通常是布尔值多些function throttle(fn, delay = 200) {let flag = truereturn function (...args) {if (!flag) {return}flag = falsesetTimeout(() => {fn.apply(this, args)flag = true}, delay)}}
要注意的是,防抖和节流返回的都是回调函数,需要先用变量接收,再进行变量的调用。
防抖和节流的区别:
防抖:函数虽然会多次执行 但是有效代码只执行一次
节流:函数虽然会多次执行 但是有效代码只会根据固定频率去执行这是关键区别:
- 防抖有重置概念
- 节流没有重置概念
- 同样有多次执行操作,防抖是将多次变为执行最后一次
- 节流是降低执行频率,变成隔一段时间执行一次
- 防抖每次触发的时候都会先把之前的取消,然后重新执行
- 节流执行的时候需要判断是否等待上次执行的延时函数
应用场景:
函数防抖(debounce):
- search搜索联想,用户在不断输入值时,用防抖来节约请求资源;
- window触发resize或scroll事件的时候,不断的调整浏览器窗口大小会不断的触发这个事件,用防抖来让其只触发一次。
函数节流(throttle):
- 一定时间内多次点击一个功能按钮
- 鼠标不断点击触发,mousedown(单位时间内只触发一次)
- 页面无限加载。需用户滚动页面时,每隔一段时间发一次 ajax 请求,而不是只要滚动就请求数据
通过resize,使浏览器页面窗口放大缩小。
部分图 借鉴了掘进的博主文章,非常详细实用
图文结合——详解 js 防抖与节流 - 掘金
防抖和节流 含义及区别图文详解秒懂相关推荐
- html js不触发_图文详解鼠标事件CSS:hover和JS:mouseover的区别
在工作中为了使页面更具有吸引力,前端开发人员经常会在页面中加上鼠标移入和移出的效果.鼠标移入移出的设置,一般有两种方法,一种是单纯用CSS中的hover伪类,另一种可以用JS 中的DOM事件,即onm ...
- Carson带你学Android:图文详解RxJava背压策略
前言 Rxjava,由于其基于事件流的链式调用.逻辑简洁 & 使用简单的特点,深受各大 Android开发者的欢迎. 本文主要讲解的是RxJava中的 背压控制策略,希望你们会喜欢. Cars ...
- 兄弟机cnc系统面板图解_数控机床操作面板图文详解
<数控机床操作面板图文详解>由会员分享,可在线阅读,更多相关<数控机床操作面板图文详解(53页珍藏版)>请在人人文库网上搜索. 1.数 控 车 床 编 程 和 操 作(一) 熟 ...
- 04-HTML标签图文详解(一)
一.排版标签 注释标签 <!-- 注释 --> 段落标签<p> <p>This is a paragraph</p> <p>This is ...
- HTML标签图文详解(二)
上篇博文我们对HTML有了大致的认识并且熟悉了一些基本的标签 HTML标签图文详解(一) 接下来我们开始更加深入的学习 <body>标签的属性 其属性有: bgcolor:设置整个网页的背 ...
- SSL之CA证书颁发机构安装图文详解
上一节我们说到,在验证公钥安全性时,是在CA机构颁发的包含用户的公钥及其身份信息的数字证书,数字证书由权威机构--CA签发.这个CA权威机构可以是自己的服务器也可以是国际公认的CA权威机构.下面我就来 ...
- php。defined,PHP defined()函数的使用图文详解
PHP defined()函数的使用图文详解 PHP defined() 函数 例子 定义和用法 defined() 函数检查某常量是否存在. 若常量存在,则返回 true,否则返回 false. 语 ...
- 一文带你轻松搞懂事务隔离级别(图文详解)
本文由 SnailClimb 和读者 BugSpeak 共同完成. 事务隔离级别(图文详解) 什么是事务? 事务是逻辑上的一组操作,要么都执行,要么都不执行. 事务最经典也经常被拿出来说例子就是转账了 ...
- java 一个大事务下的新增、修改、查询_一文带你轻松搞懂事务隔离级别(图文详解)...
点击上方"linkoffer", 选择关注公众号高薪职位第一时间送达 本文由 SnailClimb 和读者 BugSpeak 共同完成. 事务隔离级别(图文详解) 什么是事务? 事 ...
最新文章
- 与AMD合并后,赛灵思与英特尔、英伟达在数据中心市场呈“三足鼎立”之势
- java自然排序_Java中的自然排序顺序字符串比较 - 是内置的吗?
- 公众科学日|科普图书展,图灵参展啦!
- php redis消息队列用哪种好,phpredis提高消息队列的实时性方法(推荐)
- 一行Java代码竟能获取tomcat的绝对路径
- 干货 | 机器学习入门方法和资料合集
- solution: stuch on 'setting up your MAC'
- 靠着零代码报表工具,转行报表开发后月薪超过3万
- c里面的fflush函数
- 企业知识管理与协同软件Confluence搭建与配置
- JSP教程第5讲笔记
- VirtualBox虚拟机如何选中“启用嵌套 VT-x/AMD-V”
- 不要安排看代码的工作
- 编写README文档(Markdown)
- DOM事件总结(事件处理程序的类型及浏览器的兼容性)
- Ospf Forwarding address路由选路的影响
- 著者四角号码查询_著者姓名汉语拼音与四角号码数字混编书次号的研究
- 小程序上线发布后,实现版本自动更新,用户无感知
- 机械臂动力学参数辨识
- 读书百客:《轮台歌奉送封大夫出师西征》赏析