聊一聊前端 JS 的防抖和节流

最新推荐文章于 2024-04-28 13:22:20 发布

张浔

最新推荐文章于 2024-04-28 13:22:20 发布

阅读量2.1k

点赞数 17

分类专栏： HTML-CSS-JS 文章标签： html5 html css

本文链接：https://blog.csdn.net/m0_58040147/article/details/121529083

版权

文章目录（PS：觉得不错请点赞收藏支持一下）

前言
一、为什么需要使用防抖和节流
二、`debounce` 防抖
- 2.1 概念
- 2.2 实现
三、`throttle` 节流
- 3.1 概念
- 3.2 实现
总结

前言

如上图这是今天老师布置的一个任务，当初次看到任务要求时，对所述的防抖和节流是非常的陌生，第一件事就是去查阅资料了，逛了各种的教程平台，博客平台，结合了一下总结出了本篇文章，总结不易，希望可以得到大家的鼓励，当然有哪里不对的地方还请指出，感谢😊

一、为什么需要使用防抖和节流

实践最容易看清一切，直接给大家示例吧，其实实际应用场景中是浏览器窗口滚动加载、搜索框输入内容，窗口大小拖拽等，为了让大家看的更加清楚，给大家举一个简单的点击按钮例子

示例

<body>
    <!-- 定义一个按钮 -->
    <button>点击按钮</button>

    <script>
        // 获取按钮
        var btn = document.querySelector('button')

        // 绑定点击事件
        btn.addEventListener('click', function () {
     
            // 控制台输出内容
            console.log('欢迎阅读张浔的博客')
            console.log('----------------')
        })
    </script>
</body>

从上图可以发现，点击一次按钮触发一次事件，如果这个事件为发送一个请求，那么这对于服务器来说会加重负担，降低性能，很可能会造成页面的卡顿，

最低0.47元/天解锁文章

张浔

关注

17
点赞
踩
16

收藏

觉得还不错? 一键收藏
打赏
5
评论
聊一聊前端 JS 的防抖和节流

文章目录（PS：觉得不错请点赞收藏支持一下）前言一、为什么需要使用防抖和节流二、`debounce` 防抖2.1 概念2.2 实现三、`throttle` 节流3.1 概念3.2 实现总结前言如上图这是今天老师布置的一个任务，当初次看到任务要求时，对所述的防抖和节流是非常的陌生，第一件事就是去查阅资料了，逛了各种的教程平台，博客平台，结合了一下总结出了本篇文章，总结不易，希望可以得到大家的鼓励，当然有哪里不对的地方还请指出，感谢????一、为什么需要使用防抖和节流实践最容易看清一切，直接给
复制链接

扫一扫