节流和防抖

1.节流

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

一个需要频繁触发的函数，处于优化性能角度，在规定时间内，只让函数触发第一次生效，后面不生效（常见的是滚动加载、搜索查询等）

       function throttle(fn, delay) {
           let timer
           return function(){
                if(timer) {
                    clearTimeout(timer) 
                }
                timer = setTimeout(function(){
                    fn()
                    timer = null
                },time)
            })
        }
        document.scroll = throttle(function(){}, 200)

2.防抖

一个需要频繁触发的函数，在规定时间内，只让函数触发最后一次生效，前面不生效（常见的提交按钮频繁点击）

      function debounce(fn, delay) {
            var timer = null  // 记录上一次的延时器
            return function() {
                clearTimeout(timer)
                timer = setTimeout(() => {
                    fn.apply(this)
                }, delay)
            }
        }
        document.getElementById('btn').onclick = debounce(function(){}, 200)