Code not running synchronized in javascript

Question

I am kinda new in javascript programming. I've been working for years in classic languages like C++/JAVA/Python etc, and i cannot find a way to understand the way that the code is assigned to be ran in javascript.

I wanted to make a tetris game in javascript cause i have more design advantages.

A portion of code looks like this:

function output(){
    for(var i=0;i<14;i++)
    {
        for(var j=0;j<12;j++){
            if(game[i][j]==0)
                table.rows[i].cells[j].style.backgroundColor = "black";
            if(game[i][j]==1) // rosu line
                table.rows[i].cells[j].style.backgroundColor = "red";
            if(game[i][j]==2) // galben square
                table.rows[i].cells[j].style.backgroundColor = "yellow";
            if(game[i][j]==3) // verde lshape
                table.rows[i].cells[j].style.backgroundColor = "green";
            if(game[i][j]==4) // albastru jshape
                table.rows[i].cells[j].style.backgroundColor = "blue";
            if(game[i][j]==5) // cyan tee
                table.rows[i].cells[j].style.backgroundColor = "violet";
            if(game[i][j]==6) // violet zshape
                table.rows[i].cells[j].style.backgroundColor = "cyan";
            if(game[i][j]==7) // orange lshape
                table.rows[i].cells[j].style.backgroundColor = "orange";
        }
    }
}
var rand;
function create(){
    rand = Math.floor(Math.random() * 7);
    if(rand == 0)
        stack = line;
   if(rand == 1)
        stack = square;
    if(rand == 2)
        stack = lshape;
    if(rand == 3)
        stack = jshape;
    if(rand == 4)
        stack = tee;
    if(rand == 5)
        stack = zshape;
    if(rand == 6)
        stack = lshape;
    rand++;
    for(i=0;i<=3;i++)
        for(j=0;j<=3;j++)
            {
                if(game[i][j+5] != 0)
                    game_over = 1;
            }
    for(var i=0;i<4;i++)
    {
        for(var j=0;j<4;j++)
            {
                game[i][j+5] = stack[i][j]*rand;
            }
    }
    ci = 0;
    cj = 5;

    piesa_ok = 1;
}
function main(){
    while(good_piece)
    {
        create(); // it contains a statement that modifies the good_piece variable
        output(); // changes some lines from a table in html
    } 
    if(!good_piece)
        alert("game over!");
}

The following code displays the game over alert and then it displays the modified table i changed using the output function. What do i need to do in order to obtain a code that runs in the order of writing, line by line?

PS : main runs as an onclick event:

<button id="start_game" type="submit" style="text-align: center" onclick="main();">CLICK TO START THE GAME</button>

I would imagine it would be helpful if we could see the code in `create()` and `output()` — Shiny, Nov 15 '19 at 20:59

score 0 · Answer 1 · answered Nov 15 '19 at 21:03

0

Javascript environment is single threaded. Every code piece you write without doing extra stuff (like setTimeOut or setInterval) will work on ui thread. What you do in that code is blocking ui thread. Your code runs in order of writing but you see the ui change after your code finishes because it is blocked.

answered Nov 15 '19 at 21:03

Eldar

9,781
2
10
35

so i need to find a way to delay every action when i need the changes to be displayed? – Eduard Alexandru Sandu Nov 15 '19 at 21:06
btw i edited the post so u can see both of the functions – Eduard Alexandru Sandu Nov 15 '19 at 21:08

Mohannad · Accepted Answer · 2019-11-15T21:42:43.717

0

JavaScript running in browsers is single-threaded, so the code you wrote does execute exactly in the order you expect. However, page updates are not done synchronously, while alert calls are synchronous.

That means that when the browser executes your output method it updates the DOM internally and probably sets some sort of dirty flag telling the browser it needs to update the page, but it doesn't actually do it synchronously. It will wait until your JavaScript code is done (after your alert call), and execution goes back to the event loop built into the browser. Then it will actually update the page.

I think your confusion stems from the fact that the browser operates as an event loop: You just handle events, make updates to the DOM, and return execution to the browser as quick as possible to keep the user experience fluid. There is no main and you don't want to have an infinite loop in there.

edited Nov 15 '19 at 21:42

answered Nov 15 '19 at 21:10

Mohannad

124
7

thank you so much, i'll probably mark it as a solved question by your response but, now the question goes, do i need to somehow delay the code in fact to make sure the browser updates the elements as soon as possible? Is there any possibility of doing that or it is just about a different way the thinking goes in javascript? – Eduard Alexandru Sandu Nov 15 '19 at 21:15
You can delay using timers, basically telling the browser to run that piece of code (or more accurately throw it in the event queue) after XYZ time has passed. In some cases you may want that (game is based on a clock/timer), but if it's based on user interaction it might make more sense to do it based on events (when a user clicks, when a network request completes, etc...). I hope that helps! – Mohannad Nov 15 '19 at 21:45

Code not running synchronized in javascript

2 Answers2