js函数防抖和函数节流及其使用场景

一个经典的比喻:

想象每天上班大厦底下的电梯。把电梯完成一次运送,类比为一次函数的执行和响应

假设电梯有两种运行策略 debounce 和 throttle,超时设定为15秒,不考虑容量限制

电梯第一个人进来后,15秒后准时运送一次,这是节流

电梯第一个人进来后,等待15秒。如果过程中又有人进来,15秒等待重新计时,直到15秒后开始运送,这是防抖

使用场景
防抖在连续的事件,只需触发一次回调的场景有:

1.搜索框搜索输入。只需用户最后一次输入完,再发送请求

2.手机号、邮箱验证输入检测

3.窗口大小resize。只需窗口调整完成后,计算窗口大小。防止重复渲染。

节流在间隔一段时间执行一次回调的场景有:

1.滚动加载,加载更多或滚到底部监听

2.搜索框,搜索联想功能
————————————————
版权声明:本文为CSDN博主「Bitw-QwQ--猿究院」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/q_qwp_p/article/details/126105750

 

posted @ 2023-06-20 16:23  全村最靓的程序猿  阅读(36)  评论(0编辑  收藏  举报