手写节流防抖函数

最新推荐文章于 2024-04-06 20:27:56 发布

right前端

最新推荐文章于 2024-04-06 20:27:56 发布

阅读量176

点赞数

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/eee66665/article/details/124241140

版权

本文深入探讨了JavaScript中的两种优化技术——节流和防抖函数。通过示例代码展示了如何实现这两个函数，以提高网页性能，避免频繁触发事件处理函数。在示例中，节流函数用于限制点击按钮时控制台打印的频率，而防抖函数则确保在用户连续点击后只执行一次函数。理解并恰当使用这两种技术对于前端开发者来说至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

节流函数

<body>
    <button id="app">点击</button>
</body>
<script>
    var app = document.querySelector("#app");
    var trottle = function(fn, delay) {
        var t = delay || 500;
        var timer = null;
        var flag = true;
        return function() {
            if (!flag) {
                return
            }
            flag = false;
            timer = setTimeout(function() {
                fn.apply(this, arguments)
                flag = true;
            }, t)
        }
    }
    app.onclick = trottle(function() {
        console.log("Ssss");
        console.log(this);
    }, 1700)
</script>

防抖函数

<body>
    <button id="app">点击</button>
</body>
<script>
    var app = document.querySelector("#app");

    var debounce = function(fn, delay) {
        var t = delay || 500;
        var timer = null;
        return function() {
            if (timer) {
                clearTimeout(timer);
            }
            timer = setTimeout(function() {
                fn.apply(this, arguments);
            }, t)
        }
    }

    app.onclick = debounce(function() {
        console.log("Ssss");
        console.log(this);
    }, 700)
</script>