Java教程

如何实现一个防抖函数？

本文主要是介绍如何实现一个防抖函数？，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

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

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) }
    }
}
这篇关于如何实现一个防抖函数？的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航