事件触发非常频繁,而且每一次的触发,回调函数都要去执行(如果时间很短,而回调函数内部有计算,那么很可能出现浏览器卡顿现象)。
可以采用debounce(防抖)和throttle(节流)的方式来减少事件调用频率,同时又不影响实际效果。 使用lodash插件,该插件提供了防抖和节流的函数,同时也可以自己写防抖和节流的函数(使用闭包 + 定时器)。
实际问题:当鼠标经过左侧的连接时,打印当前 a 标签索引值,鼠标快速从上滑到下面,正常情况下,应该从 0打印到 15,实际上只打印了其中一部分,这就是由于短时间内频繁触发了 mouseenter事件,浏览器反应不过来。如果当前调用的回调函数中,有大量的数据、DOM节点等操作,会造成页面卡顿。
使用lodash插件的节流函数,解决该问题,触发mouseenter事件的完整函数如下:
methods: {
// 一级分类 鼠标进入修改响应数据 currentIndex 属性
// changeIndex(index) {
// // index 鼠标移上某一个一级分类的元素的索引值
// // 正常情况(用户慢慢的操作):每一个一级分类h3都会触发鼠标进入事件
// // 非正常情况(用户的操作很快):本身全部的一级分类都应该触发鼠标进入事件,但是经过测试 只有部分h3触发
// // 就是由于用户的行为过快,导致浏览器反应不过来,如果当前回调函数中 有大量业务,有可能出现卡顿现象
// this.currentIndex = index;
// console.log(index);
// },
// throttle 的回调函数,不要用箭头函数,可能出现上下文 this 问题
changeIndex: throttle(function (index) {
this.currentIndex = index;
}, 50),
// 一级分类 鼠标移除的时间回调
leaveIndex() {
// 鼠标移除,
this.currentIndex = -1;
},
},
注意:
- methods中一定不要使用简写形式
- 节流(规定的事件范围内只执行一次):在规定的间隔时间范围内不会重复触发回调,只有大于这个时间间隔才会触发回调,吧频繁触发变为少量触发 ,'_.throttle(function(){}, time)'
- 防抖(只执行最后一次):前面的所有的触发都被取消,最后一次执行在规定的时间之后才会触发,也就是说如果连续快速触发 只会执行一次 ,'_.debounce(function(){}, time)'