面试经常会被问到的节流和防抖，一分钟理解

╰半橙微兮° 2022-12-03 09:17 161阅读 0赞

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

> **微信搜索 【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)
        }
    }

**结语：**

![在这里插入图片描述][20200819195904573.png_pic_center]  
**建议收藏，不然刷着刷着就可能找不到了**。

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

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

[20200819195904573.png_pic_center]: /images/20221123/560fd9e0556b4955ba593118a1601978.png