JavaScript防抖与节流，深入浅出，一本正经讲透彻

最后

---

一、函数防抖（debounce）

================

1. 什么是防抖？

---

**函数防抖：**在频繁触发某一个事件时，一段时间内不再触发该事件后才会去调用对应的回调函数，在设定间隔时间内如果下一次事件被触发， 那么就重新开始定时器，直到事件触发结束。

规定时间内没有继续触发事件的前提下，再去调用事件处理函数；

具体如下面的例子所示：

/*定义防抖函数

• func：传入一个函数，事件不再持续触发时会调用该函数

• delay:定义持续多久后执行传入的回调函数

• */

function debounce(func,delay) {

let timer = null // 用于保存定时器

return function (…args) {

// 如果定时器存在，清除定时器，随后重新设置timer

if(timer !== null) clearTimeout(timer)

timer = setTimeout(func, delay) // 超过delay为接收到事件会调用这里的func 必要的额时候可以修改func的this指向 由于timer对外部存在引用，因此不会被销毁

}

}

/事件处理函数/

function testDeBounce(){

console.log(‘你看我执行了几次？？’)

}

// 接收debounce返回的函数

const temp = debounce(testDeBounce(),1000)

/绑定事件，测试防抖函数/

window.addEventListener(‘scroll’,()=>{

temp()

}); // 这样写最少调用一次事件处理函数，最多也不会多余下面的写法执行的次数

window.addEventListener(‘scroll’, testDeBounce); // 如果这样写的话，每当页面滚动就会调用事件处理函数

• 总结一下思路：

1.定义一个节流函数

2.函数内部使用一个变量保存定时器

3.返回一个函数，函数内部定义：如果定时器已经存在就清除定时器，重新设置定时器

4.定义一个变量来接收debounce返回的函数

5.在事件的回调函数中直接调用上一步的变量接收的方法

---

二.、函数节流

=======

**函数节流：**在事件持续触发的前提下，保证一定时间段内只调用一次事件处理函数，就是函数节流；

**函数节流实现的方式：**定时器、时间戳、定时器+时间戳；

2.1 定时器实现

思路：

1.定义节流函数throttle

2.定义timer保存定时器

3.返回一个函数。函数内部定义：如果定时器不存在，设置定时器，间隔某一时间后将timer设置为null，如果在这之前事件再次触发，则定时器中的回调无效

这是一个孤独的按钮

/*

• 定义定时器节流函数

• func:传入事件处理函数

• delay：在delay指定的时间内定时器回调无效

• */

function throttle(func,delay) {

let timer = null

const context = this

return function(…args){

// 如果定时器不存在

if(!timer){

timer = setTimeout(()=>{

func.apply(context,args) // 考虑返回的函数调用的环境，因此这里不直接使用this

timer = null // delay之后清除定时器

},delay)

}

}

}

function test() {

console.log(‘啊啊啊！’)

}

const temp = throttle(test,1000)

document.querySelector(‘button’).addEventListener(‘click’,()=>{

temp()

})

2.2 时间戳实现

var throttle = function(func, delay) {

var prev = Date.now();

return function() {

var context = this;

var args = arguments;

var now = Date.now();

if (now - prev >= delay) {

func.apply(context, args);

prev = Date.now();

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！**

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！