节流 & 防抖

节流和防抖解决的问题

• 用户高频触发事件，可能会导致页面卡顿或浏览器崩溃

产生问题的原因

• js是单线程的

节流&防抖是什么

• 节流：高频触发事件，n秒后执行一次函数（n秒内再次触发事件无效）
• 防抖：高频触发事件后，n秒后执行最后一次触发的函数（n秒内再次触发事件，会重新计时）

封装节流方法

• 应用场景：

•      窗口调整（resize）
  

•      页面滚动(sroll)
  

•      抢购疯狂点击(mousedown)
  

事件处理函数，在调用的时候，会默认传一个事件对象参数
var input = document.getElementById('inp');

        function ajax(e) {
            console.log('发送请求' + this.value);
            console.log(e);
        }

		// 返回一个函数，跟fn具有同样的功能(返回的函数为事件处理函数)
        function throttle(fn, wait){
            let timer = null;
            return function(...args){
                // 如果没有开启一个定时器，开启一个
                if(!timer){
                    timer = setTimeout(()=>{
                        fn.apply(this,args);
                        timer = null;
                    }, wait);
                }
            }
        }

        input.addEventListener('input', throttle(ajax, 2000));

防抖

• 应用场景:

•      实时搜索（keyup）
  

•      拖拽（mousemove）
  

var input = document.getElementById('inp');

function ajax(e) {
    console.log('发送请求' + this.value);
    console.log(e);
}

// 返回一个函数，跟fn具有同样的功能(返回的函数为事件处理函数)
function debounce(fn, wait) {
            let timer = null;
            return function(...args){
                clearTimeout(timer);
                timer = setTimeout(() => {
                    fn.apply(this,args);
                }, wait)
            }
   }

input.addEventListener('input', debounce(ajax, 2000));