函数节流

不断触发一个函数后，执行第一次，只有大于设定的执行周期后才会执行第二次

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/*
            节流函数：fn:要被节流的函数，delay：规定的时间
        */
       function throttle(fn,delay){
            // 记录上一次函数出发的时间
            var lastTime = 0
            return function(){
            // 记录当前函数触发的时间
            var nowTime = new Date().getTime()
            // 当当前时间减去上一次执行时间大于这个指定间隔时间才让他触发这个函数
            if(nowTime - lastTime > delay){
                // 绑定this指向
                fn.call(this)
                //同步时间
                lastTime = nowTime
            }
            }
       }

函数防抖

不断触发一个函数，在规定时间内只让最后一次生效，前面都不生效

1
2
3
4
5
6
7
8
9
10
11
function debounce(fn,delay){
           var timer = null
        //  清除上一次延时器
          return function(){
               clearTimeout(timer)
              //  重新设置一个新的延时器
              timer = setTimeout(() => {
                  fn.call(this)
              }, delay);
          }
       }