目录JAVA全系列 教程
3762个小节阅读：7088.8k
目录
C语言快速入门
JAVA全系列 教程
面向对象的程序设计语言
Python全系列 教程
Python3.x版本，未来主流的版本
人工智能 教程
顺势而为，AI创新未来
大厂算法 教程
算法，程序员自我提升必经之路
C++ 教程
一门通用计算机编程语言
微服务 教程
目前业界流行的框架组合
web前端全系列 教程
通向WEB技术世界的钥匙
大数据全系列 教程
站在云端操控万千数据
AIGC全能工具班
A A
White Night
防抖严格算起来应该属于性能优化的知识，但实际上遇到的频率相当高，处理不当或者放任不管就容易引起浏览器卡死。
从滚动条监听的例子说起
xxxxxxxxxxfunction showTop () { var scrollTop = document.documentElement.scrollTop; console.log('滚动条位置：' + scrollTop);}window.onscroll = showTop在运行的时候会发现存在一个问题：这个函数的默认执行频率，太！高！了！。 高到什么程度呢？以chrome为例，我们可以点击选中一个页面的滚动条，然后点击一次键盘的【向下方向键】，会发现函数执行了8-9次！
然而实际上我们并不需要如此高频的反馈，毕竟浏览器的性能是有限的，不应该浪费在这里，所以接着讨论如何优化这种场景。
基于上述场景，首先提出第一种思路：在第一次触发事件时，不立即执行函数，而是给出一个期限值比如200ms，然后
效果：如果短时间内大量触发同一事件，只会执行一次函数
实现：既然前面都提到了计时，那实现的关键就在于setTimeout这个函数，由于还需要一个变量来保存计时，考虑维护全局纯净，可以借助闭包来实现
xxxxxxxxxxfunction debounce(fn,delay){ let timer = null //借助闭包 return function() { if(timer){ clearTimeout(timer) } timer = setTimeout(fn,delay) // 简化写法 }}// 然后是旧代码function showTop () { var scrollTop = document.documentElement.scrollTop; console.log('滚动条位置：' + scrollTop);}window.onscroll = debounce(showTop,300)到这里，已经把防抖实现了
防抖定义
对于短时间内连续触发的事件（上面的滚动事件），防抖的含义就是让某个时间期限（如上面的1000毫秒）内，事件处理函数只执行一次
实时效果反馈
1. 以下是关于定时器防抖代码，横线处填写代码是：
xxxxxxxxxxfunction debounce(fn,delay){ let timer = null return function() { if(timer){ _2_(timer) } timer = _1_(fn,delay) }}function showTop () { var scrollTop = document.documentElement.scrollTop; console.log('滚动条位置：' + scrollTop);}window.onscroll = debounce(showTop,300)A setTimeout clearInterval
B setTimeout clearTimeout
C setInterval clearTimeout
D setInterval clearInterval
答案
1=>B