防抖精华 一学就会

01-基本操作

1.获取鼠标移动的坐标

-----
    
    -------
       

    

2.防抖优化

防抖：持续触发不执行，不触发的一段时间后才执行。
通过延时器控制多少秒后触发事件来控制获取鼠标最后一次移动的坐标

3.怎么封装一个防抖函数

这边介绍lodash中的 debounce方法

    oDiv.onmousemove = debounce(function (e) {
            // 这里面你该做啥做啥
            this.innerHTML = `x:${e.pageX},y:${e.pageY}`;
        }, 100);

        // debounce 的返回值应该是一个函数
        function debounce(cb, time) {
            let timer = null;
            return function () {
                // 这里的代码是事件触发的时候会执行的
                clearTimeout(timer);
                timer = setTimeout(() => {
                    // 第一个问题，事件对象获取不到，待会可以通过 arguments 传递过去
                    // 第二个问题，this 期望是 oDiv
                    cb.apply(this, arguments); // window.cb()
                }, time);
            };
        }

好了 一学就会 希望可以帮助广大猿友们！！！