Vue节流(throttling)微项目

一、节流概念

n秒内连续触发事件，最终只执行一次，及稀释函数执行频率（被稀释次数 = 总次数 / 定时器延迟时间），类似角色技能平A，eg：

    show(e) {
      this.timer = setTimeout(() => {
        this.pageX = e.pageX + "px";
        this.pageY = e.pageY + "px";
        this.timer = null;
      }, 50);

二、节流微项目

项目要求：

图片跟随鼠标移动，减少所被触发次数

项目简述：

1. 鼠标事件绑定，mousemove

2. css样式延迟渲染，setTimeout

3. 图片位置绑定利用v-bind绑定style

4. 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分支中