javascript - how to process functions in order not all at once

I have the following issue:

Let's say that I have a function that process an array to do something with it depending on received parameters. So something like:

 var arr = [];

 function processArr(p1, p2, ....){};

p1, p2 etc are received from the server so we get to:

processArr(<?php echo $p1; ?>, <?php echo $p2; ?>, ...)
processArr(<?php echo $p1; ?>, <?php echo $p2; ?>, ...)
processArr(<?php echo $p1; ?>, <?php echo $p2; ?>, ...)
processArr(<?php echo $p1; ?>, <?php echo $p2; ?>, ...)
processArr(<?php echo $p1; ?>, <?php echo $p2; ?>, ...)

It is actually a php for but doesn't really matter.

Problem: js process the calls simultaneously (not exactly simultaneously but close enough) instead of one after the other. So if in first call I add an element to the array (then some other processing) and in second call I try to delete the element, at delete the element doesn't exist because it wasn't added yet.

How do I make second call to wait for the first to finish?

Added function:

    function processSaved(act, params)
    {
        if (act == 1)
        {
            var newUser = params;
            if (user.id == newUser.id)
                user = clone(newUser);
            activeElementIndex = i;
            // Go to the next level from the active element level
            var newLevel = newUser.level;

            // Set current level
            currentLevel = Math.max(currentLevel, newLevel);

            // Create new object and push it to elements array
            var obj = newUser;
            elements.push(obj);
            activeElementIndex = newUser.parent;
            // Add element to order list
            if (orderElements.length + 1 > newLevel)
            {
                var added = 0;
                for (var i = 0; i < orderElements[newLevel - 1].el.length; i++)
                {
                    if (elements[activeElementIndex].column < elements[elements[orderElements[newLevel - 1].el[i]].parent].column)
                    {
                        orderElements[newLevel - 1].el.splice(i, 0, elements.length - 1);
                        added = 1;
                        break;
                    }
                }

                if (added == 0)
                    orderElements[newLevel - 1].el.push(elements.length - 1);
            }
            else
            {
                var tmp = new Array();
                tmp.push(elements.length - 1);
                var obj = {"el": tmp};
                orderElements[newLevel - 1] = obj;
            }

            flagCreate = 1;
            actions.push(newUser);
            // Call the rearange function
            rearangeElementsWithoutRedraw();
        }
        else if (act == 0)
        {
            activeElementIndex = params.index;
            deleteNode();
        }

        return true;                                                
    }

First call is made with act = 1. Second is made with act = 0. If I add a timeout to the second call with let's say 0.5 seconds everything works fine. If not I get error at removal because element does not exist. This suggests that the second call is made before first finished.

JS does not call functions in parallel. Your processArr functions are executed sequentially.

This obviously assumes that you do not simply start e.g. an AJAX request in the function - if you do the next function will obviously not wait for the request to finish (until it's synchronous).