防抖与节流
时间: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
- WordPress免插件仅代码实现文章浏览次数的方法(2)
- 苹果被告了,但网友们却觉得一点也不亏!
- Castle 整合.NET Remoting
- 这三要素,让区块链技术成为颠覆世界的技术
- 代码实现 WordPress 反垃圾评论功能
- Flash/Flex学习笔记(39):弹性运动
- 兼容Mono的下一代云环境Web开发框架ASP.NET vNext
- ASP.NET vNext 概述
- 丰富排版页面——为你的wordpress主题添加短代码形式美化框
- 开放式管理基础结构 OMI
- 人类设计了游戏和AI 2017年AI在游戏中打败了人类
- WordPress 代码实现相关文章(列表模式)功能
- 自动刷新页面
- Python语言被列入全国计算机等级考试科目中
- 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 数组属性和方法
- 支付宝二面:Mybatis接口Mapper内的方法为啥不能重载吗?我直接懵逼了...
- Windows系统中使用Linux命令(可以批量下载Modis数据)
- Python制作桑基图(我承认我低估了这个教程)
- 几个好看的Seaborn图样~(虽然官方配色一般般,但我还是忍不住夸它)
- GDAL读取MAIAC的HDF文件(熟肉)
- Google Earth Engine(GEE)-谷歌地球引擎的大致Python入门
- 谷歌地球引擎(Google Earth Engine)之数据初探(栅格和矢量)
- Python-gdal离线文档下载
- 利用python把shp文件写入PostgresSQL数据库
- python调用cmd运行GDAL报错解决:ERROR 1: PROJ
- Tungsten Fabric知识库丨测试2000个vRouter节点部署
- 一行代码快速图像识别~一排代码搞定视频识别
- Python测试开发django5.urls.py参数name与<a>标签的引用
- Pytest配置文件pytest.ini
- 移植uc/OS-III最新版到小熊派开发板(STM32L431)