博客

做项目比如点击事件的时候，或者input输入上拉下拉滚动经常会重复执行，这样就及其耗费性能，所以就应该优化一下，阻止他们过度重复执行，先说防止重复点击

可以用经典的flag思想

	submitToSut:function(){
	
                       let nums=window.localStorage.getItem('flag_is')
                 if(nums){
                  console.log('????')
                           return
                       }else{

   window.localStorage.setItem('flag_is','1')
   setTimeout(function(){
       localStorage.removeItem('flag_is')
   },1000)
                       }
        },

如下面的代码给定义一个值，如果有这个值就retrun,没有这个值就保存这个值，然后一秒钟后删除，就达到了一秒只点击一次的需要。

防抖函数，借用计时器和flag思想，最终达到的目的是操作停止后的XX秒触发

debounce(fn,delay){
    let timer = null //借助闭包回调函数
    return function() {
        if(timer){
            clearTimeout(timer) //进入该分支语句，说明当前正在一个计时过程中，并且又触发了相同事件。所以要取消当前的计时，重新开始计时
            timer = setTimeOut(fn,delay) 
        }else{
            timer = setTimeOut(fn,delay) // 进入该分支说明当前并没有在计时，那么就开始一个计时
        }
    }
}

节流函数借用时间戳来达到不管操作多少次，仍然XX秒执行一次的效果

//wait为执行多久执行一次的时间错，定义3000就是3秒执行一次
throttle( wait) {
    let previous = 0; //使用闭包先定义一个初始时间戳为0所以刚开始点击的时刻就会触发；
   //如果设置let previous =Date.now()那么就是首次触发在 wait 秒之后才会执行
    return function() {
    
      let now = Date.now();//回调函数获取当时间戳
      
      let context = this;
    
      if (now - previous > wait) {
   //当前时间戳减去初始的时间戳如果大于要定义的时间就执行函数
        this.func()
        //执行完成后将将时间戳重新赋值,
        previous = now;
      }
    }
}