防抖和节流

防抖和节流都是为了减少函数的执行次数，提升运行效率。

防抖:把多次函数执行，合并成一次执行。

给定一个间隔时间，当两次函数执行的间隔时间大于了给定的间隔时间，就执行一次函数。

 // fn是你要调用的函数，delay是防抖的时间
    function debounce(fn, delay = 1000) {
        let timer = null;
        return function () {
            let args = arguments // 获取参数，需要缓存一次
            clearTimeout(timer);
            timer = setTimeout(() => {
                fn.apply(this, args);
            }, delay)
        }
    }

节流 ：减少函数执行的频率。

规定一个单位时间，在单位时间内触发一个事件回调,触发时超过间隔时间则执行，否则不执行。

// 触发事件时立即执行，以后每过delay秒之后才执行一次
    function throttle(fn, delay = 1000) {
        // 记录第一次的调用时间
        let start = 0;
        return function () {
            let args = arguments
            let now = Date.now();
            // 如果间隔时间大于等于设置的节流时间
            if (now - start >= delay) {
                fn.apply(this, args);
                start = now;
            }
        }
    }

防抖的应用场景：
1、搜索框搜索输入。只需用户最后一次输入完，再发送请求；
2、用户名、手机号、邮箱输入验证；
3、浏览器窗口大小改变后，只需窗口调整完后，再执行resize事件中的代码，防止重复渲染。
节流的应用场景：
1、输入框的联想，可以限定用户在输入时，只在每两秒钟响应一次联想。
2、搜索框输入查询， 如果用户一直在输入中， 没有必要不停地调用去请求服务端接口，
等用户停止输入的时候， 再调用， 设置一个合适的时间间隔， 有效减轻服务端压力。
3、表单验证
4、按钮提交事件。

注：实现防抖和节流应用了闭包。需要注意一点：this和arguments在返回的函数不能直接访问的。通过...rest参数是可以获取的。