当前位置:网站首页>js的防抖和节流
js的防抖和节流
2022-07-02 06:23:00 【江河i】
防抖和节流概念
防抖和节流都是性能优化的方式 : 针对的是高频触发的事件: 比如 滚动事件scroll, 用户输入事件 input
函数防抖
debounce:用户一直触发事件,事件处理函数是不会执行的,直到用户在指定的时间内不在触发该事件,则执行一次事件处理程序(防抖意味着事件处理程序只会执行性一次)
函数节流 throttle:用户一直触发事件,事件处理函数会每间隔指定的时间后执行一次, 在指定的时间内不会反复执行;(节流意味着事件处理程序每间隔指定的时间执行一次)
防抖和节流的区别:防抖是将多次执行变为最后一次执行,节流是将多次执行变为每隔一段时间执行
防抖和节流的实现方式: 计时器和时间戳 (为了防止变量污染,通过闭包的形式实现功能)
参考网址: https://www.cnblogs.com/youma/p/10559331.html
防抖实现(计时器实现)
function debounce(fn, delay) {
//fn就是真正事件处理的函数/delay是时间
// 提前声明一个计时器, 赋值为null
let timer = null;
return function() {
//最初想法
// if (!timer) {
// timer = setTimeout(fn, delay)
// } else {
// clearTimeout(timer);
// timer = setTimeout(fn, delay)
// }
//精简版 防抖: 关键点在于清除计时器的节点
// if (timer) {
// clearTimeout(timer);
// }
// timer = setTimeout(fn, delay)
// 考虑到this指向和传参的问题
let that = this;
let args = arguments;
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(function() {
fn.apply(that, args)
}, delay)
}
}
// 真正的时间处理程序
function print() {
console.log('hello world');
}
window.onscroll = debounce(print, 2000);
//当滚动的时候,调用一个函数
</script>
节流实现(时间戳实现)
<script>
//这个节流函数利用时间戳让第一次滚动事件执行一次回调函数,此后每隔1000ms执行一次,
//在小于1000ms这段时间内的滚动是不执行的
// 节流函数 时间戳
function throttle(fn, delay) {
// 起点的时间
let start = Date.now();
return function() {
// 获取当前时间,通过 当前时间 - 起点时间 = 时间差,
// 判断 时间差和 delay的关
var now = Date.now();
if (now - start >= delay) {
print()
// 事件处理程序执行一次后,需要重新计时
start = Date.now();
}
}
}
// 真正的事件处理程序
function print() {
console.log('节流');
}
window.onscroll = throttle(print, 1000);
</script>
如果要传参,改变this的指向
<script>
// 节流函数 时间戳
function throttle(fn, delay) {
// 起点的时间
let start = Date.now();
return function() {
let that = this; //this指向window
let args = arguments;
// 获取当前时间,通过 当前时间 - 起点时间 = 时间差,
// 判断 时间差和 delay的关系
let diff = Date.now() - start
if (diff > delay) {
fn.apply(this, arguments)
// 事件处理程序执行一次后,需要重新计时,所以获取现在的时间
start = Date.now();
}
}
}
// 真正的事件处理程序
function print() {
console.log('节流');
}
window.onscroll = throttle(print, 1000);
</script>
边栏推荐
- 部署api_automation_test过程中遇到的问题
- pytest(3)parametrize参数化
- 默认google浏览器打不开链接(点击超链接没有反应)
- [daily question 1] write a function to judge whether a string is the string after the rotation of another string.
- Does the assignment of Boolean types such as tag attribute disabled selected checked not take effect?
- eslint配置代码自动格式化
- 查询GPU时无进程运行,但是显存却被占用了
- Deployment API_ automation_ Problems encountered during test
- MySql索引
- Asynchronous data copy in CUDA
猜你喜欢
Latex compiles Chinese in vscode and solves the problem of using Chinese path
由於不正常斷電導致的unexpected inconsistency;RUN fsck MANUALLY問題已解决
一口气说出 6 种实现延时消息的方案
Blog directory of zzq -- updated on 20210601
Distributed transactions: the final consistency scheme of reliable messages
代码技巧——Controller参数注解@RequestParam
Linux MySQL 5.6.51 community generic installation tutorial
Redis - big key problem
ShardingSphere-JDBC篇
How to try catch statements that return promise objects in JS
随机推荐
Win10桌面图标没有办法拖动(可以选中可以打开可以删除新建等操作但是不能拖动)
Win10网络图标消失,网络图标变成灰色,打开网络设置闪退等问题解决
一口气说出 6 种实现延时消息的方案
FE - 微信小程序 - 蓝牙 BLE 开发调研与使用
FE - Weex 使用简单封装数据加载插件为全局加载方法
Uploading attachments using Win32 in Web Automation
Sublime Text 配置php编译环境
Detailed definition of tensorrt data format
Error "list" object is not callable in Web automatic switching window
蚂蚁集团g6初探
Redis——大Key问题
selenium+msedgedriver+edge浏览器安装驱动的坑
AWD learning
Usage of map and foreach in JS
automation - Jenkins pipline 执行 nodejs 命令时,提示 node: command not found
重载全局和成员new/delete
ZZQ的博客目录--更新于20210601
浏览器滚动加载更多实现
table 组件指定列合并行方法
Log (common log framework)