前端必会的“防抖”和“节流”方法

最近因为疫情隔离居家办公,闲着没事也在回忆和整合学过的知识,这里给大家分享几个有关“防抖”和“节流”方法,希望对大家有所帮助

公司主营业务:成都做网站、成都网站建设、移动网站开发等业务。帮助企业客户真正实现互联网宣传,提高企业的竞争能力。创新互联公司是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化,感谢他们对我们的高要求,感谢他们从不同领域给我们带来的挑战,让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。创新互联公司推出都昌免费做网站回馈大家。

1 前言

在前端开发过程中,会遇到很多实时输入查询、滚动条触发等业务。而这些频发操作的事件,如果每次触发都进行执行的话,会造成性能下降、后台的压力变大,那么此时就需要使用防抖和节流进行处理。

防抖和节流,见名思义:防抖是防止抖动,节流是节约流量。

2 防抖

防抖(Debounce) 指的是触发事件后n秒后才能执行函数,如果在n秒内触发了事件,则会重新计算执行时间。

常见场景:点击按钮、拍照、下拉触底加载下一页等。

持续触发输入事件时,并不会立即执行func函数,而是在指定时间delay中没有再次触发事件时,才会进行延时执行func函数。

2.1 原始栗子(未进行防抖处理)

为了更加深入透彻地理解为什么要进行防抖处理,我们可以先体验不进行防抖的输入函数触发ajax实时请求的情况。


分享标题:前端必会的“防抖”和“节流”方法
文章来源:http://hbruida.cn/article/dsojhih.html