一定能看懂的函数防抖与函数节流 降频

函数防抖: 任务频繁触发的情况下，只有任务触发的间隔超过指定间隔的时候，任务才会执行。
debounce-函数防抖：将一个弹簧按下，继续加压，继续按下，只会在最后放手的一瞬反弹。即我们希望函数只会调用一次，即使在这之前反复调用它，最终也只会调用一次而已。

在进行窗口的resize、scroll，输入框内容校验等操作等高频率函数调用时 我们需要进行函数降频,这就是我们所说的防抖

// 滚动事件
let timer=null
function friendList(){
   console.log(Math.random()); //实现业务的地方
}
window.addEventListener('scroll', function(){
  if(timer){
    clearTimeout(timer)
  }
  timer = setTimeout(() => {
      friendList()
    },300)
});

函数节流: 指定时间间隔内只会执行一次任务；
throttle-函数节流：一个水龙头在滴水，可能一次性会滴很多滴，但是我们只希望它每隔 500ms 滴一滴水，保持这个频率。即我们希望函数在以一个可以接受的频率重复调用。
方法一

   var old = new Date().getTime()
        function friendList() {
            console.log(Math.random());
        }

        window.addEventListener('scroll', function () {
            var now = new Date().getTime()
            if (now - old >= 1000) {
                console.log(now - old, 'time')
                friendList()
                old = new Date().getTime()
            }
        });

方法二

 var lock = false
        function friendList() {
            console.log(Math.random());
        }

        window.addEventListener('scroll', function () {
            if (lock) {
                return
            }
            lock = true
            setTimeout(() => {
                friendList()
                lock = false
            }, 1000)
        });

借鉴 一定能看懂的函数防抖与函数节流