导语： 最近整理面试题目，经常能够看到手写节流和防抖函数，已经它们的用处。一分钟学会它们。

微信搜索 【web小馆】，回复 ”全栈博客项目“，即可获取 项目源码和后续的实战文章教程。

这里写目录标题

一，防抖1，定义和原理2，用处 一，节流1，定义和原理2，用处

一，防抖

1，定义和原理

定义：防抖，即如果短时间内大量触发同一事件，都会重置计时器，等到事件不触发了，再等待规定的事件，才会执行函数。

（举个简单的例子，就是如果你在我这篇博文疯狂点赞再取消赞，这个过程都会把计时器清空，等到你点累了不点了，等待0.5秒，才会触发函数，把你最终结果传给服务器。）而这整个过程就触发了一次点赞函数到服务器。

原理：设置一个定时器，设置在规定的时间后触发事件处理，每次触发事件都会重置计时器。

2，用处

防抖用于搜索框和滚动的监听事件处理，如果没有防抖，那么每输入一个字或者滚动屏幕，都会触发事件，甚至一秒钟触发几十次，性能就会浪费。

function debounce(fn, delay = 500) { let timer = null return function () { if (timer) { clearTimeout(timer) //如果timer有定义，清空 } timer = setTimeout(() => { fn.apply(this, arguments) timer = null }, delay) } }

一，节流

1，定义和原理

定义：每隔一段时间就执行一次。原理：设置一个定时器，设置0.5秒后执行事件，如果时间到了，就会执行函数并重置定时器，等待下一个0.5秒后再执行。

2，用处

滚动栏的位置查询，就能设置每0.5秒执行一次函数。

function throttle(fn, delay = 100) { let timer = null return function () { if (timer) { return } timer = setTimeout(() => { fn.apply(this, arguments) timer = null }, delay) } }

结语：

建议收藏，不然刷着刷着就可能找不到了。

有什么前端的问题欢迎私信我~期待你的到来。

同时你的点赞是对我最大的鼓励，谢谢。