完善一个防抖函数

@皮皮榴

已于 2024-04-24 15:22:26 修改

阅读量222

点赞数 1

分类专栏： Javascript基础文章标签： javascript

于 2021-07-28 21:27:30 首次发布

本文链接：https://blog.csdn.net/qq_39357822/article/details/119190583

版权

Javascript基础专栏收录该内容

30 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>防抖函数实现</title>
</head>
<body>
    <button id="btn">点击</button>
    <script>
        var oBtn = document.getElementById('btn');
        /**
         * handle 最终需要执行的事件监听
         * wait 事件触发之后多久开始执行
         * immediate 控制执行第一次还是最后一次，false表示只执行最后一次
        */
        function myDebounce(handle, wait, immediate) {
            // 参数类型判断及默认值处理
            if(typeof handle !== 'function') throw new Error('handle must be an function')
            if(typeof wait === 'undefined') wait = 1000;
            if(typeof wait === 'boolean') {
                immediate = wait;
                wait = 1000;
            }
            if(typeof immediate !== 'boolean') immediate = false;
            // 所谓的防抖效果我们想要实现的就是有一个“人”可以管理handle的执行次数
            // 如果我们想要执行最后一次，那就意味着无论我们当前点击多少次，前面的N-1次都无用
            let timer = null;
            return function proxy(...args) {
                let self = this;
                let init = immediate && !timer;
                clearTimeout(timer);
                timer = setTimeout(()=>{
                    // 因为每次点击都会给timer赋值
                    // 所以为了保证每个下一次的点击拿到的timer都是初始的值null
                    // 需要将timer每个setTimeout产生的timer置null
                    timer = null;
                   if(!immediate) handle.call(self, ...args);
                }, wait)
                // 如果当前传递进来的是 true 表示需要立即执行
                // 如果想要实现只在第一次执行，那么可以添加上 timer 为 null 作为判断
                // 因为只要 timer 为 null 就意味着没有第二次、第三次、...第N次的点击
                if (init) handle.call(self, ...args);
            }
        }
        // 定义事件执行函数
        function btnClick(ev) {
            console.log("点击了", this, ev);
        }
        // 当前我们执行了按钮点击之后就会执行 ...返回的proxy
        oBtn.onclick = myDebounce(btnClick, 1000, true);
    </script>
</body>
</html>

@皮皮榴

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
完善一个防抖函数

/ 因为只要 timer 为 null 就意味着没有第二次、第三次、...第N次的点击。// 如果我们想要执行最后一次，那就意味着无论我们当前点击多少次，前面的N-1次都无用。// 如果想要实现只在第一次执行，那么可以添加上 timer 为 null 作为判断。// 所谓的防抖效果我们想要实现的就是有一个“人”可以管理handle的执行次数。// 所以为了保证每个下一次的点击拿到的timer都是初始的值null。// 当前我们执行了按钮点击之后就会执行 ...返回的proxy。// 定义事件执行函数。
复制链接

扫一扫

专栏目录