防抖和节流

怼烎@ 2023-02-23 03:58 23阅读 0赞

**之前代码：**

滑动右侧A-Z导航条

handlerTouchMove(e) { 
      if (this.touchStatus) {      
          const touchY = e.touches[0].clientY - 79;
          const letterIndex = Math.floor((touchY - this.startY) / 20);
          if(letterIndex >= 0 && letterIndex < this.firstLetterList.length){ 
    		this.$emit("change-letter", this.firstLetterList[letterIndex]);
    	  }  
      }
    },

**防抖：**

handleTouchMove(e){ 
        //如果16ms还有操作就会再次触发touchMove，然后清除timer，重新计时，
        //所以只有保证16ms内不滑动，不清除timer才会执行$emit操作
        if(this.touchStatus){ 
            if(this.timer){ 
                clearTimeout(this.timer)
            }
            this.timer = setTimeout(() => { 
                //ref属性，在v-for里面循环生成的时候，是个Arrray，如果要获取dom元素，要用this.$refs[ref值][0]这样的形式
                const startY  = this.$refs['A'][0].offsetTop //3.拿到第一个元素距离顶部高度
                const touchY = e.touches[0].clientY-79 //4.拿到手指触动的位置
                const index = Math.floor((touchY-startY)/20) //5.得到字母下标
                if(index>=0 && index<this.letters.length){  //6.判断index范围
                    this.$emit('change',this.letters[index])
                }
            },16)       
        }
    }

**节流：**

if (this.touchStatus) { 
    
        let flag = true
    
        if (!flag){ 
            return flag = false
        } 
    
        setTimeout(() => {  // 函数节流提升性能
    
          const startY = this.$refs['A'][0].offsetTop
          const touchY = e.touches[0].clientY - 79 
          const index = Math.floor((touchY - this.startY) / 20) 
    
          if (index >= 0 && index < this.latters.length) { 
            this.$emit('change', this.latters[index]) 
          }
    
          flag = true
    
        }, 16)
    
    }

参考链接：  
https://coding.imooc.com/learn/questiondetail/142413.html  
https://coding.imooc.com/learn/questiondetail/94705.html