实现一个防抖函数

最新推荐文章于 2023-04-24 19:34:31 发布

请贝肯尼吃糖

最新推荐文章于 2023-04-24 19:34:31 发布

阅读量249

点赞数

分类专栏： JS 文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/qq_52409560/article/details/127039501

版权

JS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

在实现一个防抖函数前，我们需要了解什么是防抖事件：

防抖又称为预防事件，预防用户在短时间内高频点击，防止被高频触发，实现在n秒内多次触发只执行最后一次触发的效果。

 
<body>
    <div>防抖</div>
    <script>
        let box = document.querySelector("div");
        function shake(fun, waittime) {
            let timer = null;
            return function () {
                let that = this;
                //如果一开始存在定时器就先给清楚掉
                if (timer !== null) {
                    clearTimeout(timer);
                }
                //修改this指向，让原本指向window的handle中的this指向事件源box
                timer = setTimeout(fun.bind(that), timer);
            }
        }

        //事件处理函数
        function handle() {
            console.log(123);
        }
        //addEventListener第二个参数就是要返回一个回调函数,所以return一个函数
        box.addEventListener("click", shake(handle, 1000));

    </script>