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

Question

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.

Answer 1

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