Question

This is a simplified and explained version of my code:

    var ptext=parr.find('div.ptext');   //Text Container

    var pt=ptext.html();                //Text Container's string
    var pdv=[pt.split(" ")];            //Text Container's array of words
        pdv.push(pdv[0].length);    //Write also the number of words

    var ht=hp.html();               //Text Container's new string
    var hdv=[ht.split(" ")];            //Text Container's new array of words
    hdv.push(hdv[0].length);            //New number of words

    var kakaka=0;                       //If they begin with the same,
    for (var j=0;j<hdv[0].length;j++){  //Animate only from the position
        if (hdv[0][j]==pdv[0][j])   //where they differ
            kakaka+=2;
    }

    window.clearTimeout(ptext.data('curt'));  //Clear current animation's interval
    ptext.data('count',kakaka);      //Set starting position    
    ptext.data('curt',                      //Set interval's var into object
        window.setInterval((function (item,pdv,hdv,text_callback) {
                return function() {       //item = text obj, text_callback= callback function
                        var i=item.data('count');
                            i=(i==undefined)?0:1+i;
                        item.data('count',i);     //increase counter
                                //first phase - remove old text
                        if (i<=pdv[1])       // go on
                        {
                            item.html((pdv[0].slice(0,pdv[1]-i)).join(' '));
                        }       //if reached the position, add new text
                        else if (i<=pdv[1]+hdv[1])
                        {
                            item.html((hdv[0].slice(0,i-pdv[1])).join(' '));
                        }        //if finish clear timeout and call callback
                        else {
                            item.data('count',0);
                            window.clearTimeout(item.data('curt'));
                            text_callback();
                        }
                }
            })(ptext,pdv,hdv,text_callback),8)   //8 = supposed interval
       );


}

It gets the words from the div, removes them one by one quickly, and then populates it with the new text.

It uses .setInterval() function, which was supposed to callback every 8ms. This works beautifully on my i5 CPU, but it is terrifically slow on an i3 laptop.

Could you give some advice on how to increase performance?

Answer 1

This is the function that did it perfectly, the whole idea was to wrap it in SPANS, then for each span we would change the visibility, and when it gets to the reverse phase, replace with different text wrapped in spans.

I don’t guarantee you will ever understand anything, but you can surely get an idea how I solved it. Note, basically the main inputs are pdv, and hdv – are the word arrays of input text and output text.

function letsdance(obj,op,type,text_callback){  //animate text

    if (text_callback==undefined) var text_callback=function(){};

    var parr=obj.parents('.pconter');
    var ptext=parr.find('div.ptext');


    var pt=ptext.html();

    var ppp=ptext.children();
    var pdv=[[]];
    for (var i=0;i<ppp.length;i++)
        pdv[0].push(    ppp[i].outerHTML    );



    if (ppp.length==0){
    var pdv=[pt.split(" ")];
        for (var i=0;i<pdv[0].length;i++)
            pdv[0][i]='<span>'+pdv[0][i]+'</span>';
        ptext.html(pdv[0].join(' '));
    }

    pdv.push(pdv[0].length-1);

    if (op){
        if (type===1)
            {
                var ht=obj.html();
            }
        else if (type==2)
            {
                var ht=ptext.data('orig');  
            }
        else {
        var ide=(obj.attr('id').match(/_[\da-zA-Z]*_[\da-zA-Z]*$/))[0];
        var hp=parr.find('div.hptext[id$="'+ide+'"]');
        var ht=hp.html();   
        }
        var hdv=[ht.split(" ")];
            hdv.push(hdv[0].length-1);  
    } else {    
        var current_selection=parseInt(ptext.data('current_section'));
        if (current_selection>0){
            var pto=ptext.siblings('.subptext[id$="NN'+current_selection+'"]').html();
            }
        else 
            var pto=ptext.data('orig');

        var hdv=[pto.split(" ")];
            hdv.push(hdv[0].length-1);  
    }

    var kakaka=0;
    var kaka=false;
    for (var i=0;i<=hdv[1];i++){
        if (pdv[0][i]!=undefined&&!kaka&&hdv[0][i]==pdv[0][i].replace(/(<([^>]+)>)/ig,"")&&!/invis/.test(pdv[0][i])){
                        kakaka+=1;  
        }
        else {
            kaka=true;
            hdv[0][i]='<span class="invis">'+hdv[0][i]+'</span>'; 
        }
    }
    var invi_count=pdv[1];
    for (invi_count;invi_count>=0;invi_count--)
        if (!/invis/.test(pdv[0][invi_count])) break;

    window.clearInterval(ptext.data('curt'));
    ptext.data('count',invi_count).data('index',kakaka).data('phase',0)//data('skip',0);            
    ptext.data('curt',
        window.setInterval((function (item,pdv,hdv,text_callback) {
                return function() {
                    var i=item.data('count');      
                    var phase=item.data('phase');      
                    var index=item.data('index');    
                    switch (phase)
                    {
                        case 0:
                                item.children(':eq('+i+')').addClass('invis');
                                if (i>index)    
                                    item.data('count',i-1);
                                else
                                    item.data('count',index).data('phase',1)
                                    .html((pdv[0].slice(0,index)).join(' ')).append(' '+hdv[0].slice(index,hdv[1]).join(' '));
                        break;  
                        case 1:
                                item.children(':eq('+i+')').removeClass('invis');
                                if (i<hdv[1])
                                    item.data('count',i+1);
                                else{
                                    //item.data('count',0).data('phase',0);
                                    window.clearInterval(item.data('curt'));
                                    text_callback();
                                }
                        break;      
                    }
                }
            })(ptext,pdv,hdv,text_callback),4)
       );


}