一、节流概念
n秒内连续触发事件,最终只执行一次,及稀释函数执行频率(被稀释次数 = 总次数 / 定时器延迟时间),类似角色技能平A,eg:
show(e) {
this.timer = setTimeout(() => {
this.pageX = e.pageX + "px";
this.pageY = e.pageY + "px";
this.timer = null;
}, 50);
二、节流微项目
项目要求:
图片跟随鼠标移动,减少所被触发次数
项目简述:
鼠标事件绑定,mousemove
css样式延迟渲染,setTimeout
图片位置绑定利用v-bind绑定style
style中使用var(--pageX)进行获取与渲染
项目代码块:
data模块:
data() {
return {
pageX: "0px",
pageY: "0px",
timer: null,
count: 0,
};
},
methods模块:
methods: {
show(e) {
this.timer = setTimeout(() => {
this.pageX = e.pageX + "px";
this.pageY = e.pageY + "px";
this.timer = null;
}, 50);
},
imgPosition(){
if(this.pageX === this.pageX || this.pageY === this.pageY){
this.count += 1;
console.log(this.count);
}
}
},
项目展示:
节流移动
普通移动
小白博主一枚,如代码有不足之处,望各位指正(希望生活更加精彩,爱生活~)
防抖概念链接:https://blog.csdn.net/Chris__Feng/article/details/128841255
节流微项目链接:https://github.com/ChrisF1109/Vue-debounce-throttling-.git,位于master分支中