前端优化：节流

前言：

节流：就是防止多次没有必要的出发，比如监听窗口事件、点击事件等……

常用实现方式：1.添加loding遮罩；2.时间限制事件触发次数。

备注：只对时间限制方式做介绍

实现代码：

// 备注：vue项目中实现

// 激活触发
activated() {
 window.addEventListener("resize", this.regulating); // 添加窗口监听事件，监听当前窗口变化
}

data() {
 return {
    timer: null, // 监听节流
  }
},

methods: {
	// 节流函数
	regulating(){
	  if (!this.timer) {
	    this.timer = setTimeout(() => {
	      this.createFigure()
	      this.timer = null
	    }, 1000)
	  }
	},  

	// 调用函数
	createFigure(){
      console.log('1111111');
	}
}

未使用节流前：

使用后：

思路解析：

1. 设置初始标签为空
2. 设置setTime函数，每一个setTime函数开始以后都有一个返回值
3. 在setTime结束之后赋值初始标签为空，使之能继续进入事件。