应用JS防抖机制，浏览器窗口变化后重新渲染Echarts图表

在我的前端页面中，有一个图表：

初始化加载没有任何问题，但是，当我缩小或放大浏览器窗口时，这个图表的大小仍然不变。理想的状态应该是改变窗口大小后，图表也要跟着一起变化，而且不能影响性能，这个时候就需要运用到防抖机制。

概念：函数防抖（debounce），就是指触发事件后，在 n 秒内函数只能执行一次，如果触发事件后在 n
秒内又触发了事件，则会重新计算函数延执行时间。

总体逻辑就是这样：

 window.addEventListener("resize", debounce(updateEchat, 500))
   
    function updateEchat() {
        myChart.resize()//重新渲染
    }
    /*
    * fn [function] 需要防抖的函数
    * delay [number] 毫秒，防抖期限值
    */
    function debounce(fn, delay) {
        let timer = null 
        return function () { //这里是每次变化要执行的函数
            if (timer) {
                clearTimeout(timer)
            }
            timer = setTimeout(fn, delay) 
        }
    }

一行行看，window.addEventListener("resize", debounce(initEchat, 500)) 这行是添加监听窗口变化事件（变化的时候每秒要执行4-5次函数事件，很恐怖，所以需要防抖）

然后变化的时候呢，就去执行debounce函数返回的函数。注意：执行的不是debounce函数本身，而是debounce函数`renturn的那个函数！

让我们看debounce函数：
let timer = null 全局只执行一次。返回一个匿名函数用于每次变化窗口时执行。

initEchat，定时器执行的函数，里面的myChart.resize()会将图表重新渲染。

仔细思考，理解起来并不困难。