前端面试—防抖(debounce)和节流(throttle)

一、防抖

1.1 防抖的由来

• 用户在搜索框输入内容时，如果输一个字母或汉字就发送一次请求的话，会导致服务器压力过大，因此需要在一个规定的时间内判断用户是否有继续输入，如果有继续输入就终止掉本次请求，重新开始计时，如果没有就发送一次请求。

1.2 防抖函数的封装

function debounce(func, delay) {
    let timer = null
    return function(...args) {
        if (timer) clearTimeout(timer)
        timer = setTimeout(() => {
            func.apply(this, args)
        }, delay)
    }
}

代码解析：
func为需要进行防抖的函数，delay为规定的时间，执行debounce函数时，首先将

1.3 具体应用场景

• 输入框中频繁的输入内容，搜索或者提交信息；
• 频繁的点击按钮，触发某个事件；
• 监听浏览器滚动事件，完成某些特定操作；
• window触发resize(重绘)的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次。

二、节流

2.1 节流的由来

• 需要在某一频率范围内进行固定次数的发送请求，有自己的频率，按照自己的频率不断的进行触发，直到事件结束。

2.2 节流函数的封装

function throttle() {
    
}

代码解析
需要

2.3 具体应用场景

• 监听页面的滚动事件；
• 鼠标移动事件；
• 游戏中对于攻速的限定；
• 鼠标不断点击触发，mousedown(单位时间内只触发一次)；
• 监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断。