如何编写示例代码实现Web项目中JS函数的防抖与节流？

本文共计1100个文字，预计阅读时间需要5分钟。

目录 + 防抖 + 引入 + 防抖场景1（鼠标移入） + 防抖场景2（键盘按键） + 函数节流 + 防抖 + 经典应用常见： + 手风琴效果 + 引入 + 没有做防抖的网站： + 做了防抖的网站： + 防抖场景1（鼠标移入） + 滑动 +： + 用户本地来不“‘

目录

• 防抖
• 引入
• 防抖场景1(鼠标移入)
• 防抖场景2(键盘按键)
• 函数节流

防抖

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

引入

没有做防抖的网站:

做了防抖的网站:

防抖场景1(鼠标移入)

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

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