理解防抖与节流

防抖

防抖函数：当持续触发事件，一定时间内没有再次触发事件，事件处理函数才会执行一次。如果设定的时间到来之前，又一次触发事件，就重新开始延时。

实际应用：

1. 使用echarts时，改变浏览器的宽度时，希望重新渲染；
2. 输入搜索。输入结束后n秒才进行搜索请求，n秒内输入的内容重新记时。

<input id="content" type="text" placeholder="请输入">
    <script>
        function debounce(fun, delay) {
            let time
            return function (tar) {
                clearTimeout(time)
                time = setTimeout(() => {
                    fun(tar)
                }, delay);
            }
        }
        let content = document.getElementById('content')
        let fangdou = debounce(getTarget, 1000)
        function getTarget(tar){
            console.log(tar)
        }
        content.addEventListener('keyup', function(e) {
            fangdou(e.target.value)
        })
    </script>

节流

当持续触发事件的时候，保证一段时间内，只能调用一次事件处理函数。（一段时间，只做一件事。）

实际应用：鼠标不断触发，规定在n秒内多次点击只有一次生效。

        function throttle(fun, delay) {
            let time
            return function() {
                if(!time) {   
                    time = setTimeout(() => {
                        time = undefined
                        fun()
                    }, delay);
                }
            }
        }
        let btn = document.getElementById('btn')
        function getLog() {
            console.log('lyz')
        }
        let jieliu = throttle(getLog, 2000)
        btn.addEventListener('click', function () {
            jieliu()
        })