函数节流-歪说js

歪谈js

起因:

夜深人静,月朗星稀。'window.onresize 事件' 与 '浏览器'在大战300回合，console.log('1') 1s 十次,然后就结束了，一个悲伤的故事。

事实证明太快不好，需要一些技巧拯救一下--- 函数节流

经过：

1s10次频率太多了,降低频率，上一次还没爽够，又开始下一次，浪费资源。需要强制控制一下频率。throttle---节流阀的意思。

 var throttle = function (fn, interval) {
    var __self = fn, // 保存需要被延迟执行的函数引用
        timer, // 定时器
        firstTime = true; // 是否是第一次调用 第一次进入
    return function () {
        var args = arguments,
            __me = this;
        if (firstTime) { // 如果是第一次调用，不需延迟执行 立即插入
            __self.apply(__me, args); //执行 函数
            return firstTime = false;
        }
        if (timer) { // 如果定时器还在，说明前一次延迟执行还没有完成
            return false;
        }
        timer = setTimeout(function () { // 延迟一段时间执行  强制控制
            clearTimeout(timer); // 清除
            timer = null;
            __self.apply(__me, args);
        }, interval || 500);
    };
};
window.onresize = throttle(function () {
    console.log(1);
}, 500);
// 代码 直接 扒自 js设计模式

结束:

'window.onresize 事件' 与 '浏览器' 又没羞没躁的 开始了。。。