如何实现一个防抖函数?

在前端开发中会遇到一些频繁的事件触发,比如:

window 的 resize、scroll
mousedown、mousemove
keyup、keydown
……
为此,我们举个示例代码来了解事件如何频繁的触发:

<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge, chrome=1">
    <title>debounce</title>
    <style>
        #container {
            width: 100%;
            height: 200px;
            line-height: 200px;
            text-align: center;
            color: #fff;
            background-color: #444;
            font-size: 30px;
        }
    </style>
</head>

<body>
    <div id="container"></div>
    <script src="./防抖函数.js"></script>
</body>

</html>
// 防抖函数.js
var count = 1;
var container = document.getElementById('container');

function getUserAction(e) {
    console.log(this) // this 应该指向div 
    console.log(e)    // e 不应该打印undefined 
    container.innerHTML = count++;
};

// container.onmousemove = getUserAction;  // this 指向div 
// container.onmousemove = debounce2(getUserAction, 500); 
container.onmousemove = debounce3(getUserAction, 500,true);  

防抖 第一版

function debounce1(func, wait) {
    let timeout;
    return function () {
        // 清除上一次的定时器,如果前后两次时间间隔小于等待时间函数就无法执行
        // 只有前后两次时间间隔大于等待时间才有可能触发函数事件
        clearTimeout(timeout);
        timeout = setTimeout(func, wait);
    }
}

防抖 第二版

解决getUserAction 函数 this 指向问题

function debounce2(func, wait) {
    let timeout;
    return function () {
        let that = this;
        // 清除上一次的定时器,如果前后两次时间间隔小于等待时间函数就无法执行
        // 只有前后两次时间间隔大于等待时间才有可能触发函数事件
        clearTimeout(timeout);
        // 使用apply 函数改变func 函数this 指向
        timeout = setTimeout(function () { func.apply(that) }, wait);
    }
}

防抖 第三版

解决getUserAction 函数event对象 打印undefined问题

function debounce2(func, wait) {
    let timeout;
    return function () {
        // this 指向调用该函数的对象
        let that = this;
        // 当前函数 arguments 中存储了MouseEvent 事件
        let args = arguments;
        // 清除上一次的定时器,如果前后两次时间间隔小于等待时间函数就无法执行
        // 只有前后两次时间间隔大于等待时间才有可能触发函数事件
        clearTimeout(timeout);
        // 使用apply 函数改变func 函数this 指向
        timeout = setTimeout(function () { func.apply(that, args) }, wait);
    }
}

防抖 立即执行

我不希望非要等到事件停止触发后才执行,我希望立刻执行函数,然后等到停止触发 n 秒后,才可以重新触发执行。
immediate参数判断是否是立刻执行

function debounce3(func, wait, immediate) {
    let timeout;
    return function () {
        let that = this;
        let args = arguments;
        if (timeout) clearTimeout(timeout);
        // true 立即执行
        if (immediate) {
            // 如果已经执行过,不再执行
            let callNow = !timeout;
            // 等待N秒后 赋值null。赋值为null后如果下次事件触发事件小于等待时间,函数依旧不会被执行
            timeout = setTimeout(function () { timeout = null; }, wait)
            // 如果timeout 为undefined或null时,callNow 为true,立即执行函数
            if (callNow) { func.apply(that, args) }
        } else { timeout = setTimeout(func.apply(that, args), wait) }
    }
}
上一篇:Clickhosue 强大的函数,argMin() 和argMax()函数


下一篇:信号量