js中的函数防抖与节流
2024-09-05 19:01:12
一、滚动条监听的例子
写一个功能需求-- 监听浏览器滚动事件,返回当前滚条与顶部的距离,代码如下:
function showTop () {
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
console.log('滚动条位置:' + scrollTop);
}
window.onscroll = showTop
但是在运行的时候会发现存在一个问题:这个函数的默认执行频率,太!高!了!。
以chrome为例,我们可以点击选中一个页面的滚动条,然后点击一次键盘的向下方向键,会发现函数执行了8-9次!
浏览器的性能是有限的,不应该浪费在这里,所以接着讨论如何优化这种场景。
二、防抖(debounce)
定义:在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时。
实现:实现的关键就在于setTimeOut
这个函数,由于还需要一个变量来保存计时,考虑维护全局纯净,可以借助闭包来实现。
/*
* fn [function] 需要防抖的函数
* delay [number] 毫秒,防抖期限值
*/
function debounce(fn,delay){
let timer = null //借助闭包
return function() {
if(timer){
clearTimeout(timer) //进入该分支语句,说明当前正在一个计时过程中,并且又触发了相同事件。所以要取消当前的计时,重新开始计时
timer = setTimeOut(fn,delay)
}else{
timer = setTimeOut(fn,delay) // 进入该分支说明当前并没有在计时,那么就开始一个计时
}
}
}
场景:
- 鼠标/触摸屏的mouseover/touchmove事件
- 页面窗口的resize事件
- 滚动条的scroll事件
三、节流(throttle)
定义:规定在一个单位时间内,只能触发一次函数。如果这个单位时间内触发多次函数,只有一次生效。
实现:如果短时间内大量触发同一事件,那么在函数执行一次之后,该函数在指定的时间期限内不再工作,直至过了这段时间才重新生效。
借助setTimeout
来做一个简单的实现,加上一个状态位valid
来表示当前函数是否处于工作状态:
function throttle(fn,delay){
let valid = true
return function() {
if(!valid){
//休息时间 暂不接客
return false
}
// 工作时间,执行函数并且在间隔期内把状态位设为无效
valid = false
setTimeout(() => {
fn()
valid = true;
}, delay)
}
}
场景:
- 按钮点击事件,防止用户多次重复提交
- API的调用
最新文章
- CSS——关于z-index及层叠上下文(stacking context)
- 1Z0-053 争议题目解析704
- php : 配置
- swift_简单值 | 元祖 | 流程控制 | 字符串 | 集合
- Office PPT保持提示无法保存Gill Sans 等非TrueType字体
- Android列表控件ListView详解
- ngrok访问外网
- 配置rt-thread开发环境(配置系统,生成系统镜像)
- 你所不了解的setTimeout
- 【WCF】无废话WCF入门教程
- machine learning----->;有监督学习和无监督学习的区别
- Linux How to add a new disk to LVM
- nodejs小问题:express不是内部或外部命令
- C#中如何判断联系电话的合法性
- linux硬件时间修改与查看
- SSMS 2008R2没有智能感知方法解决
- cookie 和 HttpSession
- saltstack对递归依赖条件(死循环依赖)的处理
- C++一维数组和指针的关系总结
- Java学习之IO之File类二