自定义函数节流

自定义函数节流

在前端开发中，有时会为页面绑定 resize 事件，或者为一个页面元素绑定拖拽事件（其核心就是绑定 mousemove），这种事件有一个特点，就是用户不必特地捣乱，他在一个正常的操作中，都有可能在一个短的时间内触发非常多次事件绑定程序。

而大家知道，DOM 操作时很消耗性能的，这个时候，如果你为这些事件绑定一些操作 DOM 节点的操作的话，那就会引发大量的计算，在用户看来，页面可能就一时间没有响应，这个页面一下子变卡了变慢了。甚至在 IE 下，如果你绑定的 resize 事件进行较多 DOM 操作，其高频率可能直接就使得浏览器崩溃。

怎么解决？函数节流就是一种办法。

var throttle = function (fn, delay, mustRunDelay) {
    let timer = null;
    let startTime;
    return function () {
        let context = this, endTime = +new Date(), args = arguments;
        clearTimeout(timer);
        if (!startTime) {
            startTime = endTime;
        } else if (endTime - startTime >= mustRunDelay) {
            fn.apply(context, args);
            startTime = endTime;
        } else {
            timer = setTimeout(function () {
                fn.apply(context, args);
            }, delay);
        }
    }
}

来源整理自：vue3js.cn 面试官系列