JavaScript 柯里化,节流,防抖,惰性加载,分时函数

JavaScript8 个月前2573

一、函数柯里化

currying 又称为部分求值。一个 currying 的函数首先会接受一些参数,接受了这些参数之后,该函数并不会立即求值,而是继续返回另外一个函数,刚才传入的参数在函数形成的闭包中被保存起来。待到函数被真正需要求值的时候,之前传入的所有参数都会被一次性用于求值。下面来看一个例子。

假设我们要编写一个计算每月开销的函数。在每天结束之前,我们都要记录今天花掉了多少钱。代码如下:

var monthlyCost = 0;
var cost = function(money){
    monthlyCost += money;
};
cost(100); // 第1天开销
cost(200); // 第2天开销
cost(300); // 第3天开销
// cost(800); // 第30天开销

console.log(monthlyCost) // 输出:600

通过这段代码可以看到,每天结束后我们都会记录并计算到今天为止花掉的钱。但我们其实并不太关心每天花掉了多少钱,而只想知道到月底的时候会花掉多少钱。也就是说,实际上只需要在月底计算一次。

如果在每个月的前29天(假设30天为一个月),我们都只是保存好当天的开销,直到第30天才进行求值计算,这样就达到了我们的要求。虽然下面的 cost 函数还不是一个 currying 函数的完整实现,但有助于我们了解其思想:

var cost = (function () {
    var args = [];
    return function () {
        if (arguments.length == 0) {
            var money = 0;
            for (var i = 0; i < args.length; i++) {
                money += args[i]
            };
            return money;
        } else {
            [].push.apply(args, arguments);
        }
    }
})();

cost(100); // 未真正求值
cost(200); // 未真正求值
cost(300); // 未真正求值

console.log(cost()); // 求值并输出600

接下来我们编写一个通用的 function currying(){}, 接受一个参数,即将要被 currying 的函数。在这个例子里,这个函数的作用遍历本月每天的开销并求出他们的总和。代码如下:

var currying = function (fn) {
    var args = [];
    return function () {
        if (arguments.length === 0) {
            return fn.apply(this, args);
        };
        [].push.apply(args, arguments);
        return arguments.callee;
    }
};

var cost = (function () {
    var money = 0;
    return function () {
        for (var i = 0; i < arguments.length; i++) {
            money += arguments[i]
        };
        return money;
    }
})();

var cost = currying(cost); // 转化成 currying 函数
cost(100); // 未真正求值
cost(200); // 未真正求值
cost(300); // 未真正求值

console.log(cost()); // 求值并输出600

至此,我们完成了一个 currying 函数的编写。当调用 cost() 时,如果明确地带上了一些参数,表示此时并不进行真正的求值计算,而是把这些参数保存起来,此时让 cost 函数返回另外一个函数。只有当我们以不带参数的形式执行 cost() 时,才利用前面保存的所有参数,真正开始进行求值计算。

二、函数节流

JavaScript 中的函数大多数情况下都是由用户主动触发调用的。除非是函数本身的实现不合理,否则我们一般不会遇到跟函数性能相关的问题。但在一些少数情况下,函数的触发不是由用户直接控制的。在这些场景下,函数有可能被非常频繁地调用,而造成大的性能问题。下面看一个例子。

比如我们在 window.onresize 事件中要执行一些操作,在我们通过拖拽来改变窗口大小的时候,执行的操作在1秒钟进行了10次,而我们实际上只需要2次或3次,这就需要我们按时间段来忽略掉一些事件操作请求,比如确保在500ms内只执行一次。关于函数节流的代码实现有许多种,下面我们借助 setTimeout 来完成这件事情,代码如下:

var throttle = function (fn, delay) {
    var timer, // 定时器
        firstFlag = true; // 是否为第一次调用

    return function () {
        var ctx = this, args = arguments;

        if (firstFlag) { // 如果是第一次调用,不需延迟执行
            fn && fn.apply(ctx, args);
            return firstFlag = false;
        }

        if (timer) { // 如果定时器还在,说明前一次延迟执行还没有完成
            return false;
        }

        timer = setTimeout(function () { // 设置延迟执行
            clearTimeout(timer);
            timer = null;
            fn && fn.apply(ctx, args);
        }, delay || 500)
    };
};

window.onresize = throttle(function (e) {
    console.log(e)
}, 1000);

可以看到,上面的 throttle 函数的原理是,将即将被执行的函数用 setTimeout 延迟一段时间执行,如果该次延迟执行还没有完成,则忽略接下来调用该函数的请求。throttle 函数接受2个参数,第一个参数为需要被延迟执行的函数,第二个参数为延迟执行的时间。

三、函数防抖

除了节流函数,防抖也是应用场景比较广泛的函数,比如实时搜索。基于性能考虑,肯定不能用户每输入一个字符就发送一次搜索请求,一种方法就是等待用户停止输入,比如等待了500ms用户没有再输入,那么就发送搜索请求。下面代码也是借助 setTimeout 来完成:

<input id="ipt" placeholder="防抖函数输入">
<script>
    var debounce = function (fn, wait) {
        var timer = null;
        return function () {
            var ctx = this, args = arguments;
            if (timer) clearInterval(timer); // 如果存在延迟执行函数,则清除
            timer = setTimeout(function () {
                fn && fn.apply(ctx, args)
            }, wait || 300);
        }
    };

    document.getElementById('ipt').oninput = debounce(function () {
        console.log(this.value)
    }, 500)
</script>

可以看到防抖函数的思路,在规定时间内未触发第二次,则执行。debounce 函数接受2个参数,第一个参数为需要被延迟执行的函数,第二个参数为等待执行的时间。

四、惰性加载函数

在 Web 开发中,因为浏览器之间的实现差异,一些嗅探工作总是不可避免。比如我们需要一个在各个浏览器中能够通用的事件绑定函数 addEvent,常见的写法如下:

var addEvent = function (elem, type, handler) {
    if (window.addEventListener) {
        return elem.addEventListener(type, handler, false)
    };
    if (window.attachEvent) {
        return elem.attachEvent('on' + type, handler)
    };
};

这个函数的缺点是,当它每次被调用的时候都会执行里面的 if 条件分支,虽然执行这些 if 分支的开销不算大,但也许有一些方法可以让程序避免这些重复的执行过程。

第二种方案是这样,我们把嗅探浏览器的操作提前到代码加载的时候,在代码加载的时候就立刻进行一次判断,以便让 addEvent 返回一个包裹了正确逻辑的函数。代码如下:

var addEvent = (function () {
    if (window.addEventListener) {
        return function (elem, type, handler) {
            elem.addEventListener(type, handler, false)
        }
    };
    if (window.attachEvent) {
        return function (elem, type, handler) {
            elem.attachEvent('on' + type, handler)
        }
    };
})();

目前的 addEvent 函数依然有个缺点,也许我们从头到尾都没有使用过 addEvent 函数,这样看来,前一次的浏览器嗅探就是完全多余的操作,而且这也会稍稍延长页面 ready 的时间。

第三种方案即是我们将要讨论的惰性载入函数方案。此时 addEvent 依然被声明为一个普通函数,在函数里依然有一些分支判断。但是在第一次进入条件分支之后,在函数内部会重写这个函数,重写之后的函数就是我们期望的 addEvent 函数,在下一次进入 addEvent 函数的时候,addEvent 函数里不再存在条件分支语句:

<button id="btn">点我绑定事件</button>
<script>
    var addEvent = function (elem, type, handler) {
        if (window.addEventListener) {
            addEvent = function (elem, type, handler) {
                elem.addEventListener(type, handler, false)
            }
        } else if (window.attachEvent) {
            addEvent = function (elem, type, handler) {
                elem.attachEvent('on' + type, handler)
            }
        };
        addEvent(elem, type, handler);
    };

    var btn = document.getElementById('btn');

    addEvent(btn, "click", function () {
        console.log(1)
    });

    // 第二次绑定事件的时候, addEvent 函数已被重写,已经是我们期望的函数,不再存在条件分支语句
    addEvent(btn, "click", function () {
        console.log(2)
    });
</script>

五、分时函数

在前面关于函数节流的讨论中,我们提供了一种限制函数被频繁调用的解决方案。下面我们将遇到另外一个问题,某些函数确实是用户主动调用的,但因为一些客观原因,这些函数会严重影响页面性能,下面看一个例子。

假如我们要创建一个 WebQQ 的 QQ 好友列表。列表中通常会有成百上千个好友,如果一个好友用一个节点来表示,当我们在页面中渲染这个列表的时候,可能要一次性往页面中创建成百上千个节点,在短时间内往页面中大量添加 DOM 节点显然也会让浏览器吃不消,我们看到的结果往往就是浏览器的卡顿甚至假死,代码如下:

var ary = [];

for (var i = 1; i <= 1000; i++) {
    ary.push(i); // 假设 ary 装载了1000个好友的数据
};

var renderFriendList = function (data) {
    for (var i = 0; i < data.length; i++) {
        var div = document.createElement('div');
        div.innerHTML = i;
        document.body.appendChild(div);
    }
};

renderFriendList(ary);

这个问题的解决方案之一就是下面的 timeChunk 函数,timeChunk 函数让创建节点的工作分批进行,比如把1秒钟创建1000个节点,改为每隔200毫秒创建8个节点。timeChunk 函数接受3个参数,第一个参数是创建节点时需要用到的数据,第二个参数是封装了创建节点逻辑的函数,第三个参数表示每一批创建的节点数量。代码如下:

var timeChunk = function (ary, fn, count) {
    var timer;

    var start = function () {
        for (var i = 0; i < Math.min(count || 1, ary.length); i++) {
            fn && fn(ary.shift())
        }
    };

    return function () {
        timer = setInterval(function () {
            if (ary.length === 0) { // 如果全部节点都已经被创建好
                return clearInterval(timer);
            }
            start();
        }, 200); // 分批执行的时间间隔,也可以用参数的形式传入
    };
};

下面我们进行一个小测试,假设我们有1000个好友的数据,我们利用 timeChunk 函数,每一批只往页面中创建8个节点:

var ary = [];

for (var i = 1; i <= 1000; i++) {
    ary.push(i);
};

var renderFriendList = timeChunk(ary, function (item) {
    var div = document.createElement('div');
    div.innerHTML = item;
    document.body.appendChild(div);
}, 8);

renderFriendList();

这样就实现了我们的期望,每隔200ms创建8个节点,分批进行。

总结

以上内容有摘自《JavaScript 设计模式与开发实践》,内容有删改。在这里做个笔记,给大家做个分享,希望大家都有所收获。

1 条评论

    👍 

    1