前端性能优化——防抖（debounce）

时间：2025-01-17 20:26:33

前端性能优化——防抖（debounce）

定义：一个需要频繁触发的函数，在规定时间内只让最后一次生效，前面的不生效

二、使用场景：在最近写项目时，遇到一个搜索框模块，搜索框要求根据内容实时搜索内容，下边是一个内容列表（由于是公司的项目就不放图片了），这样就需要监听键盘的keyup事件，在每次触发事件时去进行ajax请求，可是这样就要不断的去请求数据，去调用接口，很显然，这样做出于性能优化角度很不好，于是小编就很机智的写了一个防抖函数（debounce）。

三、代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button >click</button>
<script>
    var obtn=('btn1');
    function debounce(fn,delay){
        var timer=null;//利用闭包存入内存
        return function f(){
            clearTimeout(timer);
            timer=setTimeout((function () {
                (this);
            }).bind(this),delay)
        }
    }
    =debounce(function () {
            (());
            (this);
        },600);
    //this指向问题，
</script>
</body>
</html>

四、原理
其实原理很简单，主要涉及到三个知识点（注意听）：

  1. 利用setTimeout（）特性实现延时触发，通过delay来控制延时时间

  2. 利用闭包原理将timer存在内存之中

  3. this指向问题，定时器内的this是指向window的，所以要通过call（）方法来改变其this指向，大家如果不理解上边的可以直接写(obtn),也是可以的。

下一篇来给大家讲一讲防抖函数的亲兄弟节流（throttle）函数吧！！！

相关文章