防抖在上一篇内容:案例 – 淘宝搜索 丨Ajax
1.1 什么是节流
节流策略
(throttle),顾名思义,可以减少一段时间内事件的触发频率。
![](https://i-blog.csdnimg.cn/blog_migrate/989b4345c094b58067dcdb70ff6b2e7d.png)
1.2 节流的应用场景
① 鼠标连续不断地触发某事件(如点击),只在单位时间内只触发一次;
② 懒加载时要监听计算滚动条的位置,但不必每次滑动都触发,可以降低计算的频率,而不必去浪费 CPU 资源;
1.3 节流案例 – 鼠标跟随效果
![](https://i-blog.csdnimg.cn/blog_migrate/065e1fb2608448a5c0daaa52c7aa08a8.png)
1. 渲染UI结构并美化样式
<!-- UI 结构 -->
<img src="./assets/angel.gif" alt="" id="angel" />
/* CSS 样式 */
html, body {
margin: 0;
padding: 0;
overflow: hidden;
}#angel {
position: absolute;
}
2. 不使用节流时实现鼠标跟随效果
$(function() {
// 获取图片元素
var angel = $('#angel')
// 监听文档的 mousemove 事件
$(document).on('mousemove', function(e) { // 设置图片的位置
$(angel).css('left', e.pageX + 'px').css('top', e.pageY + 'px')
})
})
3. 节流阀的概念
- 高铁卫生间是否被占用,由红绿灯控制,红灯表示被占用,绿灯表示可使用。
- 假设每个人上卫生间都需要花费5分钟,则五分钟之内,被占用的卫生间无法被其他人使用。
- 上一个人使用完毕后,需要将红灯重置为绿灯,表示下一个人可以使用卫生间。
- 下一个人在上卫生间之前,需要先判断控制灯是否为绿色,来知晓能否上卫生间。
- 节流阀为空,表示可以执行下次操作;不为空,表示不能执行下次操作。
- 当前操作执行完,必须将节流阀重置为空,表示可以执行下次操作了。
- 每次执行操作前,必须先判断节流阀是否为空。
4. 使用节流优化鼠标跟随效果
$(function() {
var angel = $('#angel')
var timer = null // 1.预定义一个 timer 节流阀
$(document).on('mousemove', function(e) {
if (timer) { return } // 3.判断节流阀是否为空,如果不为空,则证明距离上次执行间隔不足16毫秒
timer = setTimeout(function() {
$(angel).css('left', e.pageX + 'px').css('top', e.pageY + 'px')
timer = null // 2.当设置了鼠标跟随效果后,清空 timer 节流阀,方便下次开启延时器
}, 16)
})
})
1.4 总结防抖和节流的区别
- 防抖:如果事件被频繁触发,防抖能保证只有最有一次触发生效!前面 N 多次的触发都会被忽略!
- 节流:如果事件被频繁触发,节流能够减少事件触发的频率,因此,节流是有选择性地执行一部分事件!
更多Ajax内容:
黑马前端专栏干货多多,关注再学,好方便~
2023年前端学习路线图:课程、源码、笔记,技术栈另外此线路图实时更新!需要课后资料的友友们,可以直接告诉我喔~