防抖和节流

1. 防抖

1.1 定义

针对高频触发事件，让事件处理函数的逻辑代码延迟一段时间再执行，如果在延迟的这段时间再次触发，则重新开始计时，直到在计时的这段时间内没有再次触发，则执行事件处理函数的逻辑代码

原因：假如逻辑代码很多，高频触发时就会执行很多遍很多的代码，性能很低，所以需要做防抖。

box

上面的代码实现节流：我给box绑定了鼠标移动事件，当我的鼠标在box区域只移动一次时，就会打印上面的结果；当我在在500ms内多次移动鼠标，并不会打印很多次，只有我停下移动，才会打印。

1.2 代码优化——封装函数

function debounce(fn,delay){
    let tid = null;
    return function(){  //返回事件处理函数
        if(tid){
            clearTimeout(tid);
            tid = null;
        }
        let ev = event;
        tid = setTimeout(()=>{
            fn.call(this,ev);  //改变this的指向，从window改成事件源 ev为要传的参数
        },delay);
    }
}
let box = document.querySelector('.box');
box.addEventListener('mousemove', debounce(moveFn,500));
function moveFn() {
         console.log('moveFn的this', this);
         console.log('鼠标移动move事件处理函数的逻辑代码');
       }
box.addEventListener('click', debounce(clickFn, 500));  //第二个参数是函数调用结果，也得是事件处理函数，所以它需要返回一个函数
function clickFn(e) {
         console.log('moveFn的this', this);
         console.log(e);  //打印event事件
         console.log('单击事件处理函数逻辑代码');
};

1.3 使用场景

搜索框搜索输入，并在输入完成后自动搜索；手机号、邮箱验证输入检测；窗口大小resize变化后重新渲染 

2. 节流

2.1 定义

针对高频触发事件，让事件处理函数的逻辑代码每隔一段时间执行一次。这样可以稀释执行频率，提高浏览器性能。

function throttle(fn,delay) {
    let tid = null;
    return function () {  //返回事件处理函数
        if (tid) return false;
        let ev = event;
        tid = setTimeout(() => {
            fn.call(this,ev);     //执行事件处理函数的逻辑代码
            tid = null;
        }, delay);
    }
}
let box = document.querySelector('.box');
box.addEventListener('mousemove', throttle(moveFn, 600));  //再传一个定时的事件
        function moveFn(e) {
            console.log('moveFn的this:', this);
            console.log(e);   //打印event事件对象
            console.log('鼠标移动事件处理函数的逻辑代码');
        }

 2.2 使用场景

滚动加载更多、高频点击、表单重复提交