web项目开发中JS函数防抖与节流示例代码怎么写

本篇文章给大家分享的是有关web项目开发中JS函数防抖与节流示例代码怎么写，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。

防抖

经典应用常见: 手风琴效果

引入

没有做防抖的网站:

做了防抖的网站:

防抖场景1(鼠标移入)

抖动 ： 用户本来不想触发这个交互，但是由于鼠标不小心抖动误触发交互事件。
例子： 想看第五张图片，。不想看2 3 4张。 但是鼠标从第1张滑到第五张时候，不小心放在了2 3 4上面。误触发。

函数防抖 ： 用户连续多次触发某个事件，则只执行最后一次。

解决原理: 开启定时器，间隔时间内如果多次触发事件，则每一次都清除上一次定时器。

实例及解决代码:

防抖场景2(键盘按键)

经典应用场景: 搜索联想词
-开发中, 该功能后端会使用中间件"OpenSearch"或者"Elasticsearch", 后端的逻辑处理会十分高效、快捷.
-此处只是基于前端的角度, 从减少http请求这个方面出发来进行优化

函数节流

概念: 解决高频事件带来的性能问题;高频事件： 在页面中，有些事件触发频率非常的高。
例如: 鼠标移动，滚轮事件。

解决原理: 用户连续多次触发事件，指定时间内只会触发一次

实例及解决代码:

以上就是web项目开发中JS函数防抖与节流示例代码怎么写，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注行业资讯频道。