分时函数 & 节流函数

1.函数节流

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

（1）. 函数被频繁调用的场景

window.onresize 事件。我们给 window 对象绑定了 resize 事件，当浏览器窗口大小被拖动而改变的时候，这个事件触发的频率非常之高。如果我们在 window.onresize 事件函数里有一些跟 DOM节点相关的操作，而跟 DOM节点相关的操作往往是非常消耗性能的，这时候浏览器可能就会吃不消而造成卡顿现象

mousemove 事件。同样，如果我们给一个 div 节点绑定了拖曳事件（主要是 mousemove），当 div 节点被拖动的时候，也会频繁地触发该拖曳事件函数

上传进度。微云的上传功能使用了公司提供的一个浏览器插件。该浏览器插件在真正开始上传文件之前，会对文件进行扫描并随时通知 JavaScript函数，以便在页面中显示当前的扫描进度。但该插件通知的频率非常之高，大约一秒钟 10次，很显然我们在页面中不需要如此频繁地去提示用户

（2）. 函数节流原理

我们整理上面提到的三个场景，发现它们面临的共同问题是函数被触发的频率太高。比如我们在 window.onresize 事件中要打印当前的浏览器窗口大小，在我们通过拖曳来改变窗口大小的时候，打印窗口大小的工作 1秒钟进行了 10次。而我们实际上只需要 2次或者 3次。这就需要我们按时间段来忽略掉一些事件请求，比如确保在 500ms内只打印一次。很显然，我们可以借助 setTimeout 来完成这件事情

var throttle = function(fn, duration) {
        var _self = fn,
            firstTime = true,
            timer;
        if (firstTime) {
            fn();
           return firstTime = false;
        }
        if(timer){
         return false
        }
        
        timer = setTimeout(() => {
            clearTimeout(timer)
            timer = null;
            fn()
            
        }, duration||500);
    };
    window.onresize = throttle(function (params) {
        console.log(1)
    })

2. 分时函数

有时候是我们主动需要大量的频繁调用某个函数，比如在页面中插入1000个div。在短时间内往页面中大量添加 DOM节点显然也会让浏览器吃不消，我们看到的结果往往就 是浏览器的卡顿甚至假死

(1). 解决原理

我们可以把函数让创建节点的工作分批进行，比如把 1秒钟创建 1000个节点，改为每隔 200毫秒创建 8个节点。

 /**
     * @param {Array} ary - 必填---  要创建的集合
     * @param {Function} fn -必填---  业务逻辑代码
     * @param {Number} count - 可选---每批创建几个
     */
    var timeChunk = function(ary, fn, count) {
        var obj,
            timer;
        var start = function() {
            for (var i = 0; i < Math.min(count || 1, ary.length); i++) {
                obj = ary.shift()
                fn(obj)
            }

        }
        return function() {
            timer = setInterval(() => {
                if (ary.length === 0) {
                    return clearInterval(timer)
                }
                start();
            }, 500);

        }

    }
    var ary = [];

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

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

    renderFriendList();