函数节流与分时函数

亦凉 2022-05-29 09:15 194阅读 0赞

1.当js中定义的函数被短时间内多次执行时，会大大降低页面性能。例如当添加了window.onresize方法后，页面窗口变化时会自动调用N多次该方法。

于是可以使用函数节流：

给将要执行的方法做个延迟执行，当该方法还未结束延迟执行时，则自动忽略再次触发的该方法。直到延时结束。以下实现是，在点击按钮后，4秒内，再次点击按钮不再触发事件。

//    函数节流代码实现
    //将要执行的方法延迟一段时间执行，在延迟执行没有完成前，忽略接下来的调用请求
        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)
            }
        };
        document.querySelector('.clickMe').addEventListener('click', throttle(
            function(){
                console.log('clicked')
            }
            , 4000), false);

2.当页面中有一个列表，根据业务需要，我们需要在页面中渲染出大量的数据列表（曾经遇到过要在下拉列表中渲染出一千多个银行），如果我们一次性全部渲染，可能会导致页面崩溃或者假死。

于是可以使用分时函数：

规定一个方法，在规定的时间内，渲染或者执行指定数量的操作。以下实现是有100个数据，每隔200毫秒渲染10个列表，直到100个列表全部渲染完成

/    分时函数实现
    //    当页面要渲染的数据很多时，一次性渲染可能会导致页面假死或者卡崩，可以规定函数在一定的时间内渲染指定数量的数据，分时执行
        var timeChunk = function(arg, fn, count) {
      //要渲染的数据，渲染数据执行的函数，每次渲染的数量
            var obj,
                    t;
            var len = arg.length;
            var start = function() {
                for (var i = 0; i < Math.min(count || 1, arg.length); i++) {
                    var obj = arg.shift();//从数组头部移除一个元素，并返回这个值
                    fn(obj);//执行方法
                }
            };
            return function() {
                t = setInterval(function(){
                    if(arg.length === 0) {
                        return clearInterval(t);
                    }
                    start();
                },200);
            }
        };
        var arg = [];
        for( var i = 0; i <= 100; i++ ) {
            arg.push(i);
        }
        var renderList = timeChunk(arg, function(inner){
    //        console.log(arg);
            var div = document.createElement('div');
            div.innerHTML = inner;
            document.body.appendChild( div );
        }, 10);
        document.querySelector('.timeChunk').addEventListener('click', renderList, false)