requestIdleCallback示例-rIC复杂回调

源代码展示

代码

JS初始化
				
//核心代码,rIC复杂回调

function cb1(deadline){
    var i = 0,
        len = 10000,
        secs = new Date().getTime();

    add("rIC回调中,执行了一个"+len+"长度的循环");
    for(i;i<len;i++){
        if(i*10%len == 0){
            add("rIC 回调中,第"+i+"次循环","c-f00");
        }
        console.log("i="+i);
    }
    add("rIC消耗时间="+((new Date().getTime()) - secs),"c-f00");
}

function _cb1(){
    
    var i = 0,
        len = 5;
    
    info.html("");
    
    function _s(){
        if(i < len){
            add("rAF 循环次数 i="+i);
            rAF(_s);
            i++;
        }
    }
    
    rIC(cb1);
    
    rAF(_s);
}
$("#btn1").on("click",_cb1);
				
			
JS初始化(分段回调)
                
//核心代码,rIC复杂回调(分段回调)

function cb2(deadline){
    var i = 0,
        len = 1000;

    add("rIC回调中,执行了一个"+len+"长度的循环");
    function _s(deadline){
    
        for(i;i<len;i++){
            //表示该帧还有剩余的空闲时间时间
            if(deadline.timeRemaining() > 0){
                console.log("i="+i);
    
                if(i*10%len == 0){
                    add("rIC 回调中,第"+i+"次循环","c-f00");
                }
            }else{
                rIC(_s);break;
            }
        }
    
    }
    
    _s(deadline);
    
}

function _cb2(){
    
    var i = 0,
        len = 5;
    
    info.html("");
    
    function _s(){
        if(i < len){
            add("rAF 循环次数 i="+i);
            rAF(_s);
            i++;
        }
    }
        
    rIC(cb2);
        
    rAF(_s);
}
$("#btn2").on("click",_cb2);
        
                
            

展示

requestIdleCallback测试(rIC复杂回调)

rIC的复杂回调与复杂回调的优化