“优化用户体验！前端开发者必备的防抖和限流技巧“

淡淡的烟草味﹌ 2024-04-25 20:15 25阅读 0赞

![ab558ff3f5e347b4afb5748d1c26391a.gif][]

**? 江城开朗的豌豆**：[个人主页][Link 1]

**? 个人专栏** :[《 VUE 》][VUE] [《 javaScript 》][javaScript]

? **个人网站** :[《 江城开朗的豌豆? 》][Link 2]

**⛺️ 生活的理想，就是为了理想的生活 !**

![在这里插入图片描述][7a8de4d12e20434eb29590366872b046.gif_pic_center]

**目录**

? 防抖与限流

? 防抖

? 限流

--------------------

欢迎来到前端入门之旅！

![8b5871f0c9024dbcaa102112894f787e.png][]

> 欢迎来到前端入门之旅！在这个专栏中，我们将带领你进入Web开发的奇妙世界，探索前端的精彩与无限潜力。不论你是完全的新手还是有一些基础的开发者，我们都会为你提供一个系统而亲切的学习平台，让你轻松踏入前端领域。
> 
> 作为初学者，你可能对前端技术充满了好奇与迷茫。无需担心，我们以问答的形式进行更新，为大家呈现精选的前端知识点和常见问题解答。通过直接回应读者们对于前端技术方面的疑问，我们希望能够更有效地帮助你建立起扎实的基础。
> 
> ![7b9cab6f7e9847d3a03ade5ef7dc8e59.png][]
> 
> 在这个专栏中，我们将深入浅出地解释HTML、CSS、JavaScript等前端技术的概念。无论是从最基础的标记语言开始，还是针对各种常用框架和工具进行解析，我们都会为你提供清晰而易懂的讲解。此外，我们也将提供丰富的实际案例和练习，让你通过实践巩固所学内容。通过动手操作和实际编程练习，你将逐步掌握前端开发中的重要技能。
> 
>  除了基础知识之外，我们还会分享一些实用技巧和最佳实践，帮助你更好地理解并运用前端开发中的各种技术。无论是优化网页性能、响应式设计、移动端开发还是跨浏览器兼容性，我们都会提供实际可行的方法和建议。通过学习这些技巧，你将能够写出更好的代码，创建出更出色的用户体验。
> 
> 同时，我们也会关注最新的前端趋势和发展动态。随着Web技术的不断演进，前端开发也在不断推陈出新。我们会及时介绍最新的前端框架、工具和技术，使你能够站在前沿，与时俱进。通过掌握最新的前端技术，你将能够在竞争激烈的Web开发领域中有更大的竞争力。
> 
> 在这个前端入门之旅中，我们希望给予你更多的启发和帮助，让你成为一名优秀的前端开发者。无论你的目标是成为全职的前端工程师，还是仅仅出于兴趣而学习前端技术，我们都将竭尽所能地为你提供最好的资源和支持。
> 
> 订阅本专栏，跟随我们的步伐，一起探索Web开发的奇妙世界吧！让我们携手共进，共同成长！

### [? ][Link 3]防抖与限流 ###

> 如果你是一个有经验的前端开发者，那么你一定会经常遇到一些需要处理用户输入的场景，比如搜索框、下拉框、滚动加载等等。
> 
> 但是，这些场景都存在一个共同的问题：用户的输入或者滚动事件可能会触发多次，给页面带来不必要的性能负担和用户体验问题。
> 
> 为了解决这个问题，我们可以使用防抖和限流的技术手段来优化页面性能和用户体验。

![2252b09c213c46d4a30ea543e1495848.jpeg][]

### [?][Link 3] 防抖 ###

> 防抖是指在一定时间内，如果事件被触发多次，那么只会执行一次。通常情况下，我们会在用户输入框输入内容时使用防抖来避免多次触发搜索请求。
> 
> 下面是一个简单的防抖函数实现：

上面的代码中，我们传入需要防抖的函数和防抖时间间隔，然后返回一个新的函数。这个新函数内部使用了 `setTimeout` 来实现防抖。

我们可以使用这个防抖函数来优化搜索框的输入事件：

const searchInput = document.querySelector('#search-input');
    
    function search() {
      console.log('searching...');
    }
    
    searchInput.addEventListener('input', debounce(search, 500));

上面的代码中，我们在 `searchInput` 元素上绑定了一个 `input` 事件，并使用 `debounce` 函数来包装了 `search` 函数。这样，当用户输入内容时，只有在 500ms 内没有再次输入时，搜索请求才会真正发出。

### [? ][Link 3]限流 ###

限流是指在一定时间内，如果事件被触发多次，那么只会按照一定的频率执行。通常情况下，我们会在滚动加载等场景中使用限流来避免多次触发请求。

下面是一个简单的限流函数实现：

上面的代码中，我们传入需要限流的函数和限流时间间隔，然后返回一个新的函数。这个新函数内部使用了 `setTimeout` 和 `clearTimeout` 来实现限流。

我们可以使用这个限流函数来优化滚动加载事件：

function loadMore() {
      console.log('loading...');
    }
    
    window.addEventListener('scroll', throttle(loadMore, 500));

> 上面的代码中，我们在 `window` 元素上绑定了一个 `scroll` 事件，并使用 `throttle` 函数来包装了 `loadMore` 函数。这样，当用户滚动页面时，只会按照一定的频率触发加载事件，避免多次触发请求。

> 请大家不吝赐教,在下方评论或者私信我,十分感谢???.
> 
> ✅ 认为我某个部分的设计过于繁琐,有更加简单或者更高逼格的封装方式
> 
> ✅ 认为我部分代码过于老旧,可以提供新的API或最新语法
> 
> ✅ 对于文章中部分内容不理解
> 
> ✅ 解答我文章中一些疑问
> 
> ✅ 认为某些交互,功能需要优化,发现BUG
> 
> ✅ 想要添加新功能,对于整体的设计,外观有更好的建议
> 
> 最后感谢各位的耐心观看，既然都到这了，点个 ?赞再走吧

![d63bd3460ae24831937ff139be6b4021.jpeg][]

[ab558ff3f5e347b4afb5748d1c26391a.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/25/fe51f907e5f747a4834a07b31f894ee4.gif
[Link 1]: https://blog.csdn.net/qq_48652579?type=blog
[VUE]: https://blog.csdn.net/qq_48652579/category_12294321.html
[javaScript]: https://blog.csdn.net/qq_48652579/category_12275821.html
[Link 2]: https://tinyurl.com/yangtaoWeb
[7a8de4d12e20434eb29590366872b046.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/25/89a6de47a8044a56ac3f9fef361cee26.gif
[8b5871f0c9024dbcaa102112894f787e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/25/6ca99af1d3e84fecbba8e325299951b3.png
[7b9cab6f7e9847d3a03ade5ef7dc8e59.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/25/f7c608a5ef9c448a8b1501a11a1c4252.png
[Link 3]: https://blog.csdn.net/qq_48652579/article/details/133752898?spm=1001.2014.3001.5501#%E5%BC%95%E8%A8%80
[2252b09c213c46d4a30ea543e1495848.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/25/e79ee67d294741f1be327d90f3a6384f.jpeg
[d63bd3460ae24831937ff139be6b4021.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/25/dfaf414a4e1d4b36a8bb1cfcff52c456.jpeg