防抖与节流
时间:2022-07-24
本文章向大家介绍防抖与节流,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
防抖与节流
防抖debounce
与节流throttle
都是控制事件处理函数执行频率的方法,当函数会进行DOM
操作或者具有请求服务器等行为并且作为高频事件例如onscroll
触发的事件处理函数时,就需要进行事件处理函数执行频率的控制,否则会造成大量的资源浪费致使性能下降,当然无论是防抖与节流实质上并没有减少事件触发次数,而是通过减少事件处理函数的执行次数从而提高性能。
防抖
非立即防抖
当持续触发事件的时候,事件处理函数是完全不执行的,等最后一次触发结束的一段时间之后,再去执行。最常见的例子就是搜索建议功能,当用户进行持续输入时,并不会请求服务器进行搜索建议的计算,直至用户输入完成后的N
毫秒后才会将数据传输至后端并返回搜索建议。
实现思路:每次触发事件时都取消之前的延时调用方法并重设定时器。
function debounce(wait, funct, ...args){
var timer = null;
return () => {
clearTimeout(timer);
timer = setTimeout(() => funct(...args), wait);
}
}
window.onscroll = debounce(300, (a) => console.log(a), 1);
立即防抖
当持续触发事件的时候,事件处理函数会立即执行,然后不再执行事件处理函数,直至最后一次事件触发之后的一段时间后才允许再次执行事件处理函数。 实现思路:判断是否存在定时器,没有则执行事件处理函数,然后无论是否已经存在定时器都需要重设定时器。
function debounce(wait, funct, ...args){
var timer = null;
return () => {
if(!timer) funct(...args);
clearTimeout(timer);
timer = setTimeout(() => timer = null, wait);
}
}
window.onscroll = debounce(300, (a) => console.log(a), 1);
节流
当事件持续触发时,节流操作可以稀释事件处理函数执行频率,假设在1s
内onmousemove
事件触发了100
次,通过节流就可以使得onmousemove
事件的事件处理函数每100ms
触发一次,也就是在1s
内onmousemove
事件的事件处理函数只执行10
次。
时间戳实现
实现思路:通过时间戳记录上次事件处理函数执行时间,事件触发时若时间差大于执行周期则执行事件处理函数并赋值执行时间为当前时间戳。
function throttle(wait, funct, ...args){
var previous = 0;
return () => {
var now = +new Date();
if(now - previous > wait){
funct(...args);
previous = now;
}
}
}
window.onscroll = throttle(1000, (a) => console.log(a), 1);
定时器实现
实现思路:判断是否存在定时器,没有则执行事件处理函数并重设定时器。
function throttle(wait, funct, ...args){
var timer = null;
return () => {
if(!timer){
funct(...args);
timer = setTimeout(() => timer = null, wait);
}
}
}
window.onscroll = throttle(1000, (a) => console.log(a), 1);
每日一题
https://github.com/WindrunnerMax/EveryDay
参考
https://www.jianshu.com/p/566c66aafa22
https://github.com/mqyqingfeng/Blog/issues/22
https://github.com/mqyqingfeng/Blog/issues/26
- [机智的机器在学习] 机器学习中的归一化和正则化问题
- [情人节] jieba分词介绍
- 左手用R右手Python系列——异常捕获与容错处理
- 【观点】漫谈推荐系统及数据库技术(二)——分布式数据库技术
- BizTalk 2013R2 WCF-LOB Oracle Adapter安装配置/问题&解决方法
- 【Leetcode108】关关刷题日记65–Convert Sorted Array to Binary Search Tree
- 左手用R右手Python系列——动态网页抓取与selenium驱动浏览器
- 【Leetcode235】关关的刷题日记66 –Lowest Common Ancestor of a BST
- 初探Kotlin+SpringBoot联合编程
- 【Leetcode 303】关关的刷题日记67–Leetcode 303 Range Sum Query – Immutable
- 【Leetcode 70】关关的刷题日记68 – Leetcode 70 Climbing Stairs
- Linq 集合操作
- 【Leetcode 198】关关的刷题日记69 – Leetcode 198 House Robber
- 【关关的刷题日记60】Leetcode 437. Path Sum III
- 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 数组属性和方法
- 数据库PostrageSQL-服务器配置资源消耗
- 数据库PostrageSQL-服务器配置连接和认证
- 浏览器安全一 / Chrome XSS Auditor bypass
- 数据库PostrageSQL-服务器配置文件位置
- 数据库PostrageSQL-服务器配置设置参数
- 一个基于ngrx的计数器例子
- SAP Spartacus checkout Shipping address的页面实现
- 使用Let's Encrypt保护你的数据包
- php7 + nginx + mysql 安装小计
- 掌阅iReader某站Python漏洞挖掘
- SAP Spartacus payment detail page的CMS模型
- wecenter反序列化造成任意SQL语句执行
- SAP Spartacus 读取payment detail数据的API
- SRCMS 多处越权+权限提升管理员漏洞
- SAP Spartacus把指定产品添加到购物车的API