JS函数节流和函数防抖
时间:2020-03-27
本文章向大家介绍JS函数节流和函数防抖,主要包括JS函数节流和函数防抖使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
为什么需要函数防抖和函数节流?
- 例如DOM操作比起非DOM交互需要更多的内存和CPU占用时间。连续尝试进行过多的DOM操作可能会导致浏览器挂起,甚至崩溃;
- 例如当调整浏览器大小的时候,resize事件会连续触发;如果在resize事件处理程序内部尝试进行DOM操作,其高频率的更改可能会让浏览器崩溃;
- 为了绕开上面的问题,需要对该类函数进行节流;
什么是函数防抖和函数节流?
防抖(debounce)和节流(throttle)都是用来控制某个函数在一定时间内执行多少次的技巧,两者相似而又不同。
背后的基本思想是某些代码不可以在没有间断的情况下连续重复执行。
函数防抖 (debounce)
如果一个事件被频繁触发多次,并且触发的时间间隔过短,则防抖函数可以使得对应的事件处理函数只执行最后触发的一次。
函数防抖可以把多个顺序的调用合并成一次。
函数节流 (throttle)
如果一个事件被频繁触发多次,节流函数可以按照固定频率去执行对应的事件处理方法。
函数节流保证一个事件一定时间内只执行一次。
函数防抖实现
function debounce(fn, delay, scope) { let timer = null; // 返回函数对debounce作用域形成闭包 return function () { // setTimeout()中用到函数环境总是window,故需要当前环境的副本; let context = scope || this, args = arguments; // 如果事件被触发,清除timer并重新开始计时 clearTimeout(timer); timer = setTimeout(function () { fn.apply(context, args); }, delay); } }
- 代码解读
第一次调用函数,创建一个定时器,在指定的时间间隔之后运行代码;
当第二次调用该函数时,它会清除前一次的定时器并设置另一个;
如果前一个定时器已经执行过了,这个操作就没有任何意义;
然而,如果前一个定时器尚未执行,其实就是将其替换为一个新的定时器;
目的是只有在执行函数的请求停止了delay时间之后才执行。
函数节流实现
function throttle(func,delay){ var timer = null; var startTime = Date.now(); return function(){ var curTime = Date.now(); var remaining = delay-(curTime-startTime); var context = this; var args = arguments; clearTimeout(timer); if(remaining<=0){ func.apply(context,args); startTime = Date.now(); }else{ timer = setTimeout(func,remaining); } } }
原文地址:https://www.cnblogs.com/liuabo/p/12583769.html
- SpringBoot开发案例之整合mail队列篇
- SpringBoot开发案例之整合日志管理
- SpringBoot开发案例之奇技淫巧
- SpringBoot开发案例之整合Spring-data-jpa
- SpringBoot开发案例之整合定时任务(Scheduled)
- SpringBoot开发案例之整合mail发送服务
- SpringBoot开发案例之整合mongoDB
- Docker学习之CentOS 7安装配置
- Docker学习之搭建JavaWeb环境
- Docker学习之搭建JavaWeb环境进阶篇
- Docker学习之网络模式配置
- Docker学习之SSH连接docker容器
- Docker学习之搭建Nginx容器服务
- Docker学习之搭建MySql容器服务
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Python多任务-协程
- Scrapyd发布爬虫的工具
- MySQL8.0.18 试用Hash Join
- InnoDB:表空间管理
- MyBatis 增删改查
- python分析wav文件
- CICD实战——服务自动构建与部署
- python+opencv实时视频目标检测
- python数据化运营分析实例---销售预测
- Leetcode 1444. 切披萨的方案数(DP,类似石材切割,二维前缀和)
- Python生成内涵图片
- Linux 下makefile实战 ——编写真实的C项目
- MySQL8功能详解——Common table expression (CTE)
- 游戏数据分析
- MySQL8功能详解——隐藏索引