函数防抖 - 掘金

函数防抖

2020年07月09日 20:41 · 阅读 256

本篇文章主要是介绍debounce的原理，以及如何实现自己一步一步实现debounce防抖函数。

什么是防抖

含义

 事件响应函数在一段时间后执行，如果在这段时间内再次调用，则重新计算执行时间，当预定的时间内，没有再次调用该函数则执行响应函数。
复制代码

使用场景

 举个使用场景的🌰，input输入框变化时调用接口，这种频繁调用接口很容易造成页面卡顿，我们需要对变化时调用的函数进行防抖处理。
复制代码

实现防抖

第一步：简易版

第一版实例,我们实现需要被做防抖处理的函数，在指定毫秒之后执行这个功能，下面贴出的是可以直接运行的全部代码，后面优化的时候，只贴出script里面的核心代码，实验的时候只需要进行替换即可。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #container {
            height: 300px;
            width: 90%;
            background-color: #444;
            font-size: 100px;
            color: aqua;
        }
    </style>
</head>
<body>
    <div id="container"></div>
    <script>
        //防抖函数
        function debounce(func, wait) {//第一个参数：你要执行的函数  第二个参数：等待的时间
            let timeout;
            //当你调用我们这个debounce，debounce接受一个函数，然后再返回一个函数，（这就形成了一个闭包）
            return function () {
                //每次进来的时候清除一下timeout
                clearTimeout(timeout)
                timeout = setTimeout(func, wait)
            }
        }
        let count = 0;
        let container = document.querySelector('#container')
        function doSomeThing() {
            //可能会做回调或者ajax请求
            container.innerHTML = count++
        }
        //高阶函数
        container.onmousemove = debounce(doSomeThing, 300);
    </script>
</body>

</html>
复制代码

第二步：改变执行函数this指向

第二版本，我们解决了需要被防抖这个执行函数内部指向问题。这边介绍一下this指向。《JavaScript设计模式与开发实践.pdf》一书中说过，除去不常用的 with 和 eval 的情况，具体到实际应用中，this 的指向大致可以分为以下 4 种。

作为对象的方法调用
作为普通函数调用。
构造器调用

Function.prototype.call 或 Function.prototype.apply 调用。

当函数不作为对象的属性被调用时，也就是我们常说的普通函数方式，此时的 this 总是指向全局对象。在浏览器的 JavaScript 里，这个全局对象是 window 对象
下面doSomeThing()这个执行函数内部的this指向就是windows
复制代码

   当函数作为对象的方法被调用时，this 指向该对象。
   debounce内部的return函数是在对象container调用debounce函数的执行的，所以this指向该对象（container）
   所以我们可以利用这里的this指向改变执行函数中this指向问题。
复制代码

//防抖函数
function debounce(func, wait) {
    let timeout;
    return function () {
        console.log("debounce", this)   //这里的this指向container
        var that = this
        clearTimeout(timeout)
        timeout = setTimeout(function () {
            func.apply(that)  //改变执行函数container内部this的指向，原本container指向的是window
        }, wait)
    }

}
//执行函数doSomeThing
let count = 0;
let container = document.querySelector('#container')
function doSomeThing() {
    console.log("doSomeThing", this)
    container.innerHTML = count++
}
container.onmousemove = debounce(doSomeThing, 300); 

复制代码

第三步：解决event的指向问题

function debounce(func, wait) {
    let timeout;
    return function () {
        var that = this
        clearTimeout(timeout)
        let args = arguments  //解决event的指向问题
        
        timeout = setTimeout(function (e) {
            console.log('e', e)//undefined 
            func.apply(that, args)
        }, wait)
    }

}
复制代码

第四步：实现防抖函数首次进入立即执行

我们可以为debounce传递第三个参数，为true表示立即执行，上面的设计是不会立即执行，鼠标进入且没有执行下一次执行函数300ms，才会执行第一次。我们想要的是进入以后立即执行。我们一开始进来的时候timeout为undefined，!timeout则为true，所以实现了一进来立即执行。立即执行完了以后callNow就开始有值了， if (callNow) { func.apply(that, args) }这个立即函数就不会再被执行了，就会执行下面的setTimeout(function () {func.apply(that, args)}, wait)。主要思想就是第一次进去立即执行

function debounce(func, wait, immediate) {
    let timeout;
    return function () {
        var that = this
        clearTimeout(timeout)
        let args = arguments
        //我想要鼠标进来之后立即执行
        if (immediate) {
            let callNow = !timeout;
            timeout = setTimeout(() => {
                timeout = null
            }, wait)
            if (callNow) {
                //表示立即执行
                func.apply(that, args)
            }

        } else {
            //不会立即执行
            timeout = setTimeout(function () {
                func.apply(that, args)
            }, wait)
        }
    }

}
let count = 0;
let container = document.querySelector('#container')
function doSomeThing() {
    container.innerHTML = count++
}
container.onmousemove = debounce(doSomeThing, 300, true); 
复制代码