Improve multiple setInterval() lag in javascript matrix effect

Question

I am using multiple setInterval() e.g. to create, move, delete the strings that fall on the screen

Problem is that the MODE 1 interval causes a lag for the interval1

I've also tried to switch to the MODE 2 STUFF but the lag still occurs...

How can this be improved?

function getRandomInt(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; }
var chinese = [`電`,`買`,`開`,`東`,`車`,`紅`,`馬`,`無`,`鳥`,`熱`,`時`,`佛`,`德`,`拜`,`黑`,`冰`,`兔`,`妒`,`壤`,`每`,`步`,`聽`,`實`,`證`,`龍`,`賣`,`龜`,`藝`,`戰`,`繩`,`關`,`鐵`,`圖`,`團`,`轉`,`廣`,`惡`,`豐`,`腦`,`雜`,`壓`,`雞`,`價`,`樂`,`氣`,`廳`,`發`,`勞`,`劍`,`歲`,`權`,`燒`,`贊`,`兩`,`譯`,`觀`,`營`,`處`,`學`,`體`,`點`,`麥`,`蟲`,`舊`,`會`,`萬`,`盜`,`寶`,`國`,`醫`,`雙`,`觸`,`參`];
var japanese = ['が','ぎ','ぐ','げ','ご','ゃ','ゅ','ょ','ざ','じ','ず','ぜ','ぞ','だ','づ','で','ど','ぢ','ば','ぶ','べ','ぼ','ぱ','ぴ', 'ぷ','ぺ','ぽ','あ','い','う','え','お','か','き','く','け','こ','き','さ','し','す','せ','そ','し','た','ち','つ','て','と','ち','な','に','ぬ','ね','の','に','は','ふ','へ','ほ','ひ','ま','み','む','め','も','や','ゆ','よ','ら','る','れ','ろ','り','わ','ゐ','ゑ','を'];
var characters = japanese;
var speedL = [60,80,90,100,120,140,160,180,200,220,240,280,300,400,500,600,700,800,810,820,830,840,850];
var speedDown = [4,5,6,7,8,9,10];



// MODE 2 STUFF

/*var timeStmpSleepMs = 480;
var timeStmp = Date.now();*/



function do_string(){
    var string = document.createElement('section');
    var sd = speedDown[Math.floor(Math.random()*speedDown.length)];
    string.style.left = Math.floor(Math.random() * (document.documentElement.clientWidth-80)) + 'px';
    var t = -2200;
    string.style.top = t+'px';

    var interval1 = setInterval(function(){



        // MODE 2 STUFF

        /*var newTimeStmp = Date.now();
        if((newTimeStmp - timeStmp) > 480){
            timeStmp = newTimeStmp;
            //console.log('timeStmpSleepMs fired');
            do_string();
        }*/



        if(parseInt(string.style.top) >= (document.documentElement.clientHeight-100)){
            clearInterval(interval1);
            string.remove();
            return false;
        }
        string.style.top = (t += sd) + 'px';
    }, 16);

    function letter(){
        var letter = document.createElement('div');
        letter.innerHTML = characters[Math.floor(Math.random()*characters.length)];
        string.appendChild(letter);



        // CHANGING LETTER & DELETING LETTER

        /*var interval2 = setInterval(function(){
            if(parseInt(string.style.top) >= (document.documentElement.clientHeight-200)){
                clearInterval(interval2);
                letter.remove();
                return false;
            }
            letter.innerHTML = characters[Math.floor(Math.random()*characters.length)];
        }, speedL[Math.floor(Math.random()*speedL.length)]);*/



    }

    for(var i=0; i<getRandomInt(1, 180); i++){
        letter();
        document.body.appendChild(string);
    }
}

do_string();



// MODE 1 STUFF

setInterval(function(){
    do_string();
}, 480);

body {
    font-size: 16px;
    background: black;
    color: #25ff00;
    font-weight: bold;
    font-family: monospace;
    line-height: 20px;
}
section {
    position: fixed;
}

for smooth animations use `CSS` if you can, and `requestAnimationFrame` when you can't — Jaromanda X, Mar 08 '18 at 05:32
@JaromandaX please can you show an example of how requestAnimationFrame can be integrated with this? — neoDev, Mar 08 '18 at 05:36
not at the moment - but if nobody answers in the next couple of hours, I may feel up to it :p Also, this mode 1 mode 2 stuff is confusing — Jaromanda X, Mar 08 '18 at 05:38
ok, I am updating it and trying to use requestAnimationFrame now — neoDev, Mar 08 '18 at 05:41
one thing the two answers didn't point out is that the requestAnimationFrame callback receives a `DOMHighResTimeStamp` as an argument - meaning that you can make the animation a consistent speed — Jaromanda X, Mar 08 '18 at 05:45

Ashok Vishwakarma · Answer 1 · 2018-03-08T05:48:55.217

-1

Hey setInterval uses the same event loop to run, for better performance use requestAnimationFrame which runs on a separate event loop leaving the current one open for other things, see the code below

function doString(){
   // Do your string stuff

   var rid = requestAnimationFrame(doString);
}

doString();

If you want to control the FPS see this post

edited Mar 08 '18 at 05:48

answered Mar 08 '18 at 05:36

Ashok Vishwakarma

669
7
20

javascript has no threads - and the example code will run exactly once - not exactly a shining example of animation – Jaromanda X Mar 08 '18 at 05:40
Your code still doesn't show the 2 important aspects in animating using requestAnimationFrame. 1 - to animate, you need to call requestAnimationFrame in the callback ... 2 - the callback receives a high resolution timer as an argument, allowing more precise animation timings – Jaromanda X Mar 08 '18 at 05:47
@JaromandaX I have fixed the two problems check now, and thanks for the help :) – Ashok Vishwakarma Mar 08 '18 at 05:50

Improve multiple setInterval() lag in javascript matrix effect

1 Answers1