如何实现一个防抖函数？

最新推荐文章于 2024-04-01 19:36:13 发布

gxhlh

最新推荐文章于 2024-04-01 19:36:13 发布

阅读量1.6k

点赞数

分类专栏：面试直通车文章标签： javascript 前端 es6

本文链接：https://blog.csdn.net/qq_44721831/article/details/121171830

版权

面试直通车专栏收录该内容

38 篇文章 2 订阅

订阅专栏

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

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) }
    }
}

参考文章：JavaScript专题之跟着underscore学防抖

gxhlh

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
1
评论
如何实现一个防抖函数？

在前端开发中会遇到一些频繁的事件触发，比如：window 的 resize、scrollmousedown、mousemovekeyup、keydown……为此，我们举个示例代码来了解事件如何频繁的触发：<!DOCTYPE html><html lang="zh-cmn-Hans"><head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" conte
复制链接

扫一扫