防抖节流2

最新推荐文章于 2024-07-20 14:49:34 发布

学习的叶子

最新推荐文章于 2024-07-20 14:49:34 发布

阅读量119

点赞数

分类专栏：开发注意事项 js 基础知识

本文链接：https://blog.csdn.net/weixin_41991501/article/details/104512843

版权

js 基础知识同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

开发注意事项

0 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div {
            width: 0;
            height: 0;
            border: 50px solid transparent;
            border-top: 50px solid pink;
        }
    </style>
</head>
 
<body>
    <button onclick="clickEvent('123')">点击频繁</button>
    <script>
        // 防抖
        function debounce (fn, wait, immiediate = true) {
            let timeout, result;
            // 延迟函数
            const later = (context, args) => setTimeout(() => {
                timeout = null;
                if (!immiediate) {
                    result = fn.apply(context, args);
                    context = args = null;
                }
            }, wait)
            let debounced = function (...params) {
                if (!timeout) {
                    timeout = later(this, params);
                    if (immiediate) {
                        result = fn.apply(this, params)
                    }
                } else {
                    clearTimeout(timeout);
                    timeout = later(this, params)
                }
                return result;
            }
            // 提供外部清空定时器的方法
            debounced.cancel = function () {
                clearTimeout(timeout);
                timeout = null;
            }
            return debounced;
        }
        // 节流
        // function throttle(func, wait) {
        //     let timeout;
        //     return function() {
        //         let context = this;
        //         let args = arguments;
        //         if (!timeout) {
        //             timeout = setTimeout(() => {
        //                 timeout = null;
        //                 func.apply(context, args)
        //             }, wait)
        //         }
        //     }
        // }
        function test (res) {
            console.log('点击事件');
            console.log(res); // 123
        }
        let clickEvent = debounce(test, 5000)
    </script>
</body>
 
</html>