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

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

一，防抖

1，定义和原理

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

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

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

2，用处

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

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)
    }
}

结语：服务器

建议收藏，否则刷着刷着就可能找不到了。微信

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

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