JS防抖和节流

一、防抖
(1)概念：
当持续触发事件，一定时间内没有再触发事件，事件处理函数只会执行一次，如果设定的时间到来之前又一次触发了事件，就重新开始延时。
比如点击按钮2s后调用函数，在第1.5s时又点了，则会重新开始计时，又要等2s
(2)实际应用：
使用echarts时，改变浏览器宽度的时候，希望重新渲染echarts的图像，可以用此函数提升性能(虽然echarts里有自带的resize函数)
典型的案例就是输入搜索：输入结束后n秒才进行搜索请求，n秒内又输入的内容，就重新计时，解决搜索的bug
 

<input type="text">
<script>
    let input = document.querySelector('input')
    // 防抖函数
    function debounce(delay,callback) {
        let timer;
        return function (value) {
            clearTimeout(timer);
            // 需要清除setTimeout 
            // timer变量需要一直保存在内存中(闭包)
            // 不想打印之前已经输入的结果，那就要清除以前触发的定时器
            timer = setTimeout(function () {
                // console.log(value); // 希望结果在外面输出
                callback(value)
            }, delay)
        }
    }
    function fn(value){
        console.log(value);
    }
    // 需求：键盘抬起不再输入的1s后，输入框的结果只出现一次
    let debounceFunc = debounce(1000,fn)
    input.addEventListener('keyup', function (e) {
        debounceFunc(e.target.value)
    })
</script>

二、节流

(1)概念：
当持续触发事件的时候，保证一段时间内，只触发一次事件处理函数
(2)实际应用：
表单的提交
典型的案例就是鼠标不断点击触发，规定在n秒内多次点击只有一次生效

<button id="button">点击</button>
<script>
    function throttle(func, wait) {
        let timerOut;
        // 相当于是在办理业务
        return function () {
            if (!timerOut) {
                // 如果timerOut有值的话就不执行
                timerOut = setTimeout(function () {
                    func();
                    // 工作人员办理完了之后，后面的不办理了
                    timerOut = null;
                }, wait)
            }
        }
    }
    function handle(){
        console.log(Math.random());
    }
    let btn = document.querySelector('#button')
    btn.onclick = throttle(handle,2000)
</script>