防抖和节流

防抖和节流的使用场景
防抖（debounce）

1.search搜索联想，用户在不断输入值时，用防抖来节约请求资源。
2.window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次

节流（throttle）

1.用户在输入框不断输入值时，每隔规定的时间来读取一次数据  input(单位时间内只触发一次)
2.轮播图在播放过程中,用户不断点击切换没有效果,只能在规定时间后才可以进行点击
 

防抖：

高频率触发的事件,在指定的单位时间内，只响应最后一次(后面触发的事件执行，替代了前面的事件)

<input type="text" id="inp" value="">
<script>
    function debounce(fn, time) {
        let timeout = null; // 创建一个标记用来存放定时器的返回值
        return function () {
            clearTimeout(timeout); // 每当用户输入的时候把前一个 setTimeout 删除 
            timeout = setTimeout(() => { // 然后又创建一个新的 setTimeout, 保证输入字符后的间隔内如果还有字符输入的话，就不会执行 fn 函数
                fn.apply(this);
            }, time);
        };
    }
    function fn() {
        // 在控制台打印输入框中输的信息,也就是value
        console.log(this.value);
    }
    var inp = document.getElementById('inp');
    inp.addEventListener('input', debounce(fn, 5000)); // 防抖
</script>

节流：

高频率触发的事件,在指定的单位时间内，只响应第一次(前面触发的执行前，忽略后面的事件)