JS函数节流和分时函数

JS函数节流

函数节流就是降低函数被调用的频率，主要是针对 DOM 事件暴露出的问题提出的一种解决方案。例如，使用 resize、mousemove、mouseover、mouseout、keydown、keyup 等事件，都会频繁的触发事件。如果这些事件的处理函数中包含大量耗时操作，如 Ajax 请求、数据库查询、DOM 遍历等，则可能会让浏览器崩溃，严重影响用户体验。

例如，在大型网点平台的导航栏中，为了减轻 mouseover 和 mouseout 移动过快给浏览器处理带来的负担，特别是减轻涉及 Ajax 调用给服务器造成的极大负担，都会进行函数节流处理。

【设计思想】

让代码在间断的情况下重复执行。

【实现方法】

使用定时器对函数进行节流。

//函数节流封装代码，参数method表示要执行的函数，delay表示要延迟的时间，单位为毫秒
function throttle(mothod, delay) {
    var timer = null;  //定时器句柄
    return function () {  //返回节流函数
        var context = this, args = arguments;  //上下文函数和参数对象
        clearTimeout(timer);  //先清理未执行的函数
        timer = setTimeout(function () {  //重新定义定时器，记录新的定时器句柄
            method.apply(context, args);  //执行预设的函数
        }, delay);
    }
}

【应用代码】

设计文本框的 keyup 事件和窗口的 resize 事件，在浏览器中拖动窗口，或者在文本框中输入字符，然后在控制台查看事件响应次数和速度。

<input id="search" type="text" name="search">
<script>
    function queryData(text) { console.log("搜索：" + text); }
    var input = document.getElementById("search");
    input.addEventListener("keyup", function(event) {queryData(this.value); });
    var n = 0;  //记录响应次数
    function f() { console.log("响应次数：" + ++n); }
    window.onresize = f;
</script>

通过观察可以发现，在拖动改变窗口的一瞬间，resize 事件响应了几十次。如果在文本框中输入字符，keyup 事件会立即响应，等不到用户输入完一个单词。

下面使用 throttle() 封装函数，把上面的事件处理函数转换为节流函数，同时设置延迟时间为 500 毫秒。

input.addEventListener("keyup", function(event) {
    throttle(queryData, 500) (this.value);
});
window.onresize = throttle(f, 500);

重新进行测试，会发现拖动一次窗口改变大小，仅响应一次，而在文本框中输入字符时，也不会立即响应，等了半秒钟，才显示输入的字符。

JS分时函数

分时函数与函数节流的设计思路相近，但应用场景略有不同。当批量操作影响到页面性能时，如一次往页面中添加大量 DOM 节点，显然会给浏览器渲染带来影响，极端情况下可能会出现卡顿或假死等现象。

【设计思路】

 把批量操作分批处理，如把 1 秒钟创建 100 个节点，改为每隔 200 毫秒创建 100 个节点等。

【实现代码】

var timeChunk = function (ary, fn, count) {
    var t;
    var start = function () {
        for (var i = 0; i < Math.min(count || 1, ary.length); i ++) {
            var obj = ary.shift();
            fn(obj);
        }
    }
    return function () {
        t = setInterval (function () {
            if (ary.length === 0) {  //如果全部节点都已经被创建好
                return clearInterval(t);
            }
            start();
        }, 200);  //分批执行的时间间隔，也可以用参数的形式传入
    };
};

timeChunk 函数接收 3 个参数，第 1 个参数表示批量操作时需要用到的数据，第 2 个参数封装了批量操作的逻辑函数，第 3 个参数表示分批操作的数量。

下面在页面中插入 10000 个 span 元素，由于数量巨大，这里使用分时函数进行分批操作。

var arr = [];
for (var i = 1; i < 10000; i ++) {
    var span = document.creatElement("span");
    span.style.padding = "6px 12px";
    span.innerHTML = i;
    arr.push(span);
}
var fn = function (obj) {
    document.body.appendChild(obj);
}
timeChunk(arr, fn, 100) ();