实现方式

有两种实现方式，一种是使用工具库loadsh.js，另外一种是自己写。

一、防抖

1. **概述：**用户操作很频繁，但是只执行一次，前面所有的触发都被取消，最后一次执行在规定的时间之后才会触发。
2. 场景： (1) 搜索框搜索输入，只需用户最后一次输入完，再发送请求。 (2) 手机号、邮箱验证输入检测 onchange oninput事件。 (3)窗口大小Resize。只需窗口调整完成后，计算窗口大小。防止重复渲染。
3. loadsh：

//先引入loadsh.js
// 防抖
let input = document.querySelector("input");
//文本立即发生变化执行
input.oninput = _.debounce(function () {
   console.log(input.value);
}, 3000)
//lodash插件：里面封装函数的防抖与节流的业务【闭包+延时器】

4.自定义：

    function showLog() {
        console.log('show');
    }

    /*
    * 防抖 思路：
    * 先开启一个定时任务执行，定时任务完成后则清空；当再调用时，如果定时任务仍存在则清空原来任务，创建新的定时任务
    * */
    function debounce(fn, space) {
        let task = null;
        return function (){
            if(task) {
                clearTimeout(task);
            }
            task = setTimeout(fn.apply(this, arguments), space);
        }
    }
    // 使用
    let debounceShowLog = debounce(showLog, 3000);
    debounceShowLog()

二、节流

5. **概述：**在规定的间隔时间范围内不会重复触发回调，只有大于这个时间间隔才会触发回调，把频繁触发变为少量触发

6. 场景： (1) 懒加载、滚动加载、加载更多或监听滚动条位置。 (2) 百度搜索框，搜索联想功能。 (3)防止高频点击提交，防止表单重复提交。

7. loadsh：

// 节流
    let span = document.querySelector("span");
    let btn = document.querySelector("button");
    let number = 0;
    btn.onclick = _.throttle(function () {
        //加入这里如果有很多业务逻辑，就可以给浏览器很充裕的时间去解析
        number++;
        span.innerHTML = number;
    }, 3000)

4.自定义：

    /*
    * 节流 思路：
    * 先开启一个定时任务执行，定时任务完成后则清空，当再调用时，如果定时任务仍存在则不执行任何操作
    * */
    function throttle(fn, space) {
        let task = null;
        return function () {
            if(!task) {
                task = setTimeout(() => {
                    task = null;
                    fn.apply(this, arguments);
                }, space);
            }
        }
    }

    let throttleShowLog = throttle(showLog, 3000);