节流函数与实现双击

首先节流和防抖的概念

节流一般用在下拉事件,比如下拉的时候打印aaa,比如设置1000毫秒间隔,那么就会从第一次开始之后,如果你持续下拉,它也只会1000毫秒执行一次

防抖一般用在输入框搜索事件,比如搜索第一下,出现搜索结果,然后就会从第一次开始之后,如果你持续输入,它不会再出发搜索了,直到你停下来又触发一次

 

有个注意到的小问题

 function aa() {
    return function () {
      console.log('asfdsdafa')
    }
  }
  window.addEventListener('scroll', aa())
addEventListener只会事件触发时触发一个函数,而这里aa会代码运行就执行,然后返回了一个函数,执行的就是这个返回的函数

  

节流函数

function throttle(fn,time){
  //首先一开始定义一个时间戳作为上次的时间
  let lastTime = 0
  return function(){
     //然后获取当前时间和上次时间的插值,看看是否大于了当前间隔time
    let curTime = Date.now()
     if(curTime - lastTime > time){
         //如果大于了,说明可以触发了,并且更新一下上次的时间为当前时间
         fn()
         lastTime = curTime
      }
  }
}

function log(){
  console.log('节流')
}

window.addEventListener('scroll',throttle(log,1000))

双击事件

这里我简单说一下实现,为什么要实现这个呢,因为uniapp里不支持双击事件........

首先没次点击的时候,都会进行判断,判断的是上次点击和这次点击的时间间隔是否小于300毫秒

而由于单击双击事件的执行都是0毫秒触发的,这就是势必会有,就算快速点两下触发双击,但是第一下的时候,如果和上次间隔时间大于300了,就会触发单击,当然了,如果你连续点击很快,那就都是双击了

那么如何解决这个问题呢

我的解决方法是用延时器,

单击事件的执行的事件要拖延一下,因为不能确保这次点击不会和下次点击连成双击事件,而这个拖延的事件肯定是要大于判断的300毫秒的,要在300毫秒之后执行,就可以确定这次点击时单击事件,就放心执行单击的逻辑

而假设我点击了一下,此时进行了单击,但是还没有过完400毫秒,没有真正执行单击的逻辑,这时又快速点击了一下,达成了双击的判断,进入双击逻辑内,首先清除定时器,停止单击事件的执行,扼杀掉,然后执行双击事件,这样就解决掉了这个问题

但是牺牲了用户体验,因为这样单击点击会有400ms延时,感觉有点卡

data(){
  return {
     lastTime: 0,
     curTime: 0
  }
} 
double() {
      this.curTime = Date.now()
      // 如果这次点击与上次点击的间隔小于300毫秒,说明是双击
      if (this.curTime - this.lastTime < 300) { // 触发双击事件
        clearTimeout(timer) // 200毫秒之内如果触发了双击事件,就把单击事件清除
        console.log('双击')
      } else {
        clearTimeout(timer)
        // 并且把上次时间更新,
        this.lastTime = Date.now()
        timer = setTimeout(() => {
          console.log('单击')
        }, 400)
      }
    },