Question

我正在使用多个setInterval（），例如创建，移动，删除落在屏幕上的字符串

问题是MODE 1间隔导致interval1

滞后

我也试图切换到MODE 2 STUFF，但滞后仍然发生...

如何改进？

＆＃13;

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);

＆＃13;

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

＆＃13;

Answer 1

嘿setInterval使用相同的事件循环来运行，为了更好的性能，使用requestAnimationFrame运行在一个单独的事件循环上，让当前的一个开放用于其他事情，请参阅下面的代码

function doString(){
   // Do your string stuff

   var rid = requestAnimationFrame(doString);
}

doString();

如果您想控制FPS see this post

在javascript矩阵效果中改进多个setInterval（）延迟

1 个答案: