理解防抖和节流

1.防抖
什么是防抖？为什么需要防抖？在一段时间内频繁触发DOM事件监听并引起函数调用很消耗性能，并且在很多时候是不必要的。比如用户注册用户名时，前端获取用户的输入并且判断用户名是否合理，没必要在每次用户输入一个值时都一直提示。此时就需要用到防抖，实现在用户输入完成一段时间后再真正调用函数。简单来说，防抖的原理就是在事件触发n秒（自定义）后再调用回调函数，如果在这n秒内又被触发，则重新计时。
以input文本输入框j为例：

    <div class="title">1. 防抖案例</div>
    <input type="text" id="myinput">

        // 防抖
        let element = document.getElementById('myinput');
        let timer = null;
        function debounce(fn, delay = 500) {
            let timer = null;
            // debounce是对fn的封装，本质上是返回一个函数
            return function() {
                // 清除掉之前的定时任务
                if (timer) {
                    clearTimeout(timer);
                };
                timer = setTimeout(() => {
                    // fn.apply(this, arguments);
                    fn();
                    timer = null;
                }, delay);
            };
        };
        element.addEventListener('keyup', debounce(()=>{
            console.log(element.value);
        }, 1000))

2.节流
节流也是防止过于频繁的函数调用，与防抖不同的是，它是按照一定的时间间隔（自定义）调用函数，与最后一次事件触发关系不大，也可以用定时器设置。
以拖拽功能为例：

    <div class="title">2. 节流案例</div>
    <div id="div1" draggable="true">可拖拽</div>

        let div1 = document.getElementById('div1');
        // throttle函数封装
        function throttle(fn, delay=100) {
            let timer = null;
            return function() {
                if (timer) {
                    return
                };
                timer = setTimeout(()=>{
                    // 此处this指向绑定的div
                    // console.log(this);
                    // 将绑定的div传递给fn函数
                    fn.apply(this, arguments)
                    // fn()
                    timer = null
                }, delay)
            }
        };
        div1.addEventListener('drag', throttle(function(event){
            console.log([event.screenX, event.screenY]);
        }))