web项目开发之JS函数防抖与节流示例代码 web项目开发之JS函数防抖与节流

防抖

引入
防抖场景1(鼠标移入)
防抖场景2(键盘按键)

函数节流

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

引入
没有做防抖的网站:

做了防抖的网站:
【web项目开发之JS函数防抖与节流示例代码】

防抖场景1(鼠标移入)
抖动：用户本来不想触发这个交互，但是由于鼠标不小心抖动误触发交互事件。
例子：想看第五张图片，。不想看2 3 4张。但是鼠标从第1张滑到第五张时候，不小心放在了2 3 4上面。误触发。
函数防抖：用户连续多次触发某个事件，则只执行最后一次。
解决原理: 开启定时器，间隔时间内如果多次触发事件，则每一次都清除上一次定时器。
实例及解决代码:

动画-案例《手风琴》 - 锐客网* {margin: 0; padding: 0; }ul {list-style: none; width: 2400px; }#box {width: 1200px; height: 400px; border: 1px solid red; margin: 100px auto; overflow: hidden; }#box li {width: 100px; height: 400px; float: left; transition: all 0.5s ease-out; }#box li.over {width: 800px; }

文章图片