JavaScript函数节流

JavaScript函数节流

在处理echarts图表的时候，往往需要使用window.onresize来监听页面大小，从而进一步去改变echarts的大小，但是resize事件触发的频率极其频繁，如果页面的echarts图表又很多，这无疑是一件十分灾难的事情。

首先定义一个节流函数，需要接收一个函数，并且返回一个函数，示例如下：

throttle = (fn) => {
    let timer;
    return function () {
        console.log("执行次数");
        if (timer) {
            return;
        }
        timer = setTimeout(() => {
            fn();
            clearTimeout(timer);
            timer = null;
        }, 2000);
    };
};

原理很简单，就是使用setTimeout延迟执行，如果尚未执行完毕，则直接返回。

应用如下：

window.onresize = this.throttle(function () {
    console.log(new Date().toLocaleTimeString());
});

效果还是很明显的：