手把手教你轻松手写防抖和节流🔥

2023/1/1 JavaScript手写

文章地址 (opens new window)

# 起源

面试官:“知道防抖和节流吗,简单地说说。”

此时我心中窃喜,这么简单,有手就行。然后就开始介绍起防抖节流的知识点。

我:“防抖是....,然后节流是....,它们的应用场景在....”

能说的东西都说到了,能覆盖的知识点都覆盖到了,结果面试官来一句:“嗯嗯好,给我手写一下防抖节流。”

这一刻我愣住了:“让我手写这两个....,我不会呀....”

最后结果可想而知。

于是乎,我便重整旗鼓,来面对这两座对我之前而言的大山 — 防抖和节流。

# 防抖

顾名思义,我们可以将防抖理解为是防止抖动。当我们在频繁地触发一个事件时,会引起不必要的性能损失,那么我们需要做的是让事件在停止触发后再触发,以此减少性能损失。

防抖就是要延迟执行,我们一直操作触发事件并且不执行,只有当停止操作后等才会执行。

防抖函数的作用是控制函数在一定时间内的执行次数。简单点说就是通过防抖函数让某个触发事件在 n 秒内只会被执行一次。

# 节流

节流是指绑定事件后,通过动作触发事件,在这段时间内,如果动作又发生,忽略该动作,一直到事件执行完后才能重新触发。通俗的说就是控制高频执行的次数。

节流函数的作用是在一个单位时间内最多只能触发一次函数执行,如果这个单位时间内多次触发函数,只能有一次生效。

# 应用场景

可能这样描述对刚接触防抖节流的小伙伴来说会有些不好完全理解,接下来通过分析一下它们的应用场景来深化它们的概念。

# 防抖应用场景

防抖适合多次事件一次响应的情况。

比较典型的有搜索事件,用户在不断输入值时,用防抖来节约请求资源,只有最后一次回车才能返回结果。还有按钮点击事件,为了防止用户多次重复提交也会使用防抖函数。最后就是部分的电话号码输入的验证,要等停止输入后才会进行一次验证。

# 节流应用场景

节流适合大量事件按时间做平均分配触发。

比较典型的有监听滚动或 resize 事件,比如是否滑到底部自动加载更多,调整窗口大小。另外还有一个就是像掘金写文章这里一样,有自动保存功能,我们一边写,它可以一边保存。剩下就比如说 DOM 元素拖拽,以及游戏中的刷新率都是会使用到节流函数的。

# 手写防抖节流

介绍了它们的理论基础知识和应用场景后,现在来手写一下它们吧。

// 防抖(简单版本)
function debounce(fn, delay) {
    let timer = null;
    clearTimeout(timer); // 下次调用时会清除上次的timer, 然后重新延迟
    timer = setTimeout(function(){
        fn();
    }, delay);
}

// 防抖(立即执行版本)
function debounce(fn, wait) {
    let timer = null
    return function () {
        let args = arguments
        let now = !timer
        timer && clearTimeout(timer)
        timer = setTimeout(() => {
            timer = null
        }, wait)
        if (now) {
            fn.apply(this, args)
        }
    }
}

// 节流(定时器版本)
function throttle(fn, wait) {
    let timer = null
    return function () {
        let context = this
        let args = arguments
        if (!timer) {
            timer = setTimeout(() => {
                timer = null
                fn.apply(context, args)
            }, wait)
        }
    }
}

防抖和节流的核心就是定时器,通过配合定时器来完成防抖节流函数的手写是很常见的方式。这里附上防抖函数的两种写法以及节流函数的一种写法,都可以参考研究。

# 总结

防抖和节流能有效减少浏览器引擎的损耗,防止出现页面堵塞卡顿现象,需要熟练掌握。 防抖和节流学习完后,还有其他的手写题等着我,接下来慢慢去学并记录下来。

강남역 4번 출구
Plastic / Fallin` Dild