函数节流

  methods:{
        handleLetterClick(e){
            this.$emit('change',e.target.innerText)
            //子组件监听父组件里的chenge事件,并传给一个参数
        },
        handleTouchStart(){
            this.touchStatus = true
        },
        handleTouchMove(e){
           if(this.touchStatus){
                if(this.timer){
                    clearTimeout(this.timer)
                }
             this.timer = setTimeout(()=>{           
              const touchY = e.touches[0].clientY-79   //手指一栋时所在的Y值减去顶部搜索框的高度79
              const index = Math.floor((touchY - this.startY)/20)  //当前手指滑动的位置 index:第几个字母?=(手指所在位置-A所在位置)/每个字母的高度
              if(index >= 0 && index<this.letters.length){       
              this.$emit('change',this.letters[index])
              }
                },30)
           }
        },
        handleTouchEnd(){
            this.touchStatus=false
        }
    }复制代码

手指滑动开始,touchStatus值为true。touchStatus值为true 的话,清除函数timer,然后重新赋值一个函数timer并在30m后运行代码,然后一直不断重复的清除函数timer,然后重新赋值一个函数timer并在30m后运行。


你可能感兴趣的:(函数节流)