优秀的编程知识分享平台

网站首页 > 技术文章 正文

JavaScript性能优化之防抖(debounce)函数的实现

nanyue 2024-10-24 11:43:49 技术文章 13 ℃


小白坐在工位上，翘着二郎腿儿，不停的抖动着，晃动的频率极其的快，把老麦克刚泡的咖啡都震出了涟漪，老麦克向小白抛了个眼神儿，谁知道人家盯着电脑一点没注意到。于是老麦克再也人不住了。

“小白，稳住，别抖了！再抖下去公司的大楼都被你给振倒了。”

小白尴尬一笑：“对不住啊，刚才再思考问题，没注意到，抱歉抱歉”

“哎呦，什么问题，说来听听”

“我写了一个方法，它对键盘的keyUp事件进行了监听，也就是说每次按键抬起都会有一次调用”。

“这听起来好像没什么问题啊！”

“但是如果如每次keyUp的时候都向服务器发起一次请求会怎么样？会不会导致请求太快太多而卡死呢？”

“哈哈，确实会有这样的业务场景，你可以先让他别抖动！”麦克说。

小白看了下自己的腿，说：“我没抖啊”

“我的意思说，你可以写一个防抖函数 debounce 来进行优化！”

先把你写的监听keyUp的函数给我看下，我们一起来进行优化。


防抖(debounce)函数

防抖函数其实就是减少前端向服务器的频繁请求，减少服务器的压力，试想如果服务器响应慢的话，将会是多么糟糕的用户体验，少年那就防抖（debounce）吧。

防抖函数写完了。是不是很简单。接下来使用下看看效果。

我们每次keyup会有一个100毫秒的延迟，让服务器的访问不至于太频繁。但是这个防抖debounce函数还是有些问题。

  • setText的上下文问题
  • 第一次调用是不需要有延迟的。

那么我来对这两点进行优化，修改debounce函数如下：


firstTime变量用来判断防抖函数是不是第一次执行，如果是第一次执行则不需要延迟直接调用func方法，如果不是第一次执行则执行setTimeout函数延迟执行func。另外通过apply修改了func的上下文也就是this 的指向。让他指向了调用它的DOM元素。那么我们完整的代码如下。

附上代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <input type="text" id="input-text">
    <div id="show"></div>
</body>
<script>
    window.onload = () => {
        let inpuText = document.getElementById('input-text');
        inpuText.onkeyup = debounce(setText, 500)
    }

    function setText() {
        let show = document.getElementById('show');
        let val = this.value;
        show.innerText = val;
    }

    let debounce = (func, wait) => {
        let timeout = null;
        let firstTime = true;//第一次执行不需要延迟
        return function () {
            console.log(firstTime);
            if (firstTime) {
                func.apply(this, arguments);
                firstTime = false;
            }
            clearTimeout(timeout);
            timeout = setTimeout(() => {
                func.apply(this, arguments)
            }, wait)
        }
    }
</script>


总结

防抖(debounce)函数就是用来减少频繁调用事件处理函数。减少浏览器的负担，优化用户体验，多用于窗口的resize、scroll，输入框内容校验等操作时。

Tags：

猜你喜欢

最近发表
标签列表