0

I have a number of functions containing jquery that should be executed sequentially. They aren't used to create effects but rather to position certain elements at a calculated location inside a div. All online resources on jquery queue are focused on the creation of transitions or animations so it's hard to find a simple example on how to execute a number of simple functions sequentially.

I have these functions:

function bigItemRecalc(recalc, idBase, innerHeight, i) {
    if (recalc < 0) {
        $('#' + idBase + i).css('max-height', (innerHeight + (2 * recalc)));
        recalc = 0;
    }
    return recalc;
}

function firstCheck(recalc, idBase, i) {
    if (i == 1) {
        $('#' + idBase + i).css('margin-top', recalc * -1);
    }
}

function lastCheck(recalc, idBase, itemAmount, i) {
    if (i == itemAmount) {
        $('#' + idBase + i).css('margin-top', recalc);
    }
}

function truncateItems(totalHeight, widgetHeight, idBase, i) {
    if (totalHeight > (widgetHeight - 20)) {
        $('#' + idBase + i).remove();
        $('#' + idBase + "b" + i).remove();
    }
}

In another function I want to execute these sequentially by using a jquery queue preferably , but I haven't got a clue how.

The code is called here:

function styleWidget(itemAmount, widgetHeight, widgetWidth, idBase) {
    var innerHeight;
    var outerHeight;
    var recalc;
    var totalHeight = 0;
    var totalWidth = 0;

for (var i = 1; i <= itemAmount; i++)
    {
        if (widgetHeight >= widgetWidth)
        {
            totalHeight += $('#'+idBase+i).height();
            innerHeight = $('#' + idBase + i).height();
            outerHeight = (widgetHeight/itemAmount);
            recalc = ((outerHeight / 2) - (innerHeight / 2));
            recalc = bigItemRecalc(recalc, idBase, innerHeight, i);

                $('#' + idBase + i).css('padding-top', recalc);
                firstCheck(recalc, idBase, i);
                lastCheck(recalc, idBase, itemAmount, i);
                truncateItems(totalHeight, widgetHeight, idBase, i);



        }
        else
        {
            innerHeight = $('#'+idBase+i).height();
            outerHeight = widgetHeight;
            recalc = ((outerHeight/2)-(innerHeight/2));
            $('#'+idBase+i).css('padding-top',recalc);
            totalWidth += $('#'+idBase+i).width();
            if (totalWidth > (widgetWidth-20))
            {
                $('#' + idBase + i).remove();
                $('#' + idBase + "b" + i).remove();
            }

        }
    }

    }

The bottom part hasn't been updated just yet, but it can be ignored as it's being tested with portrait mode widgets.

I think I've found a clue. When no delay is introduced the values of totalHeight and innerHeight seem very low. So I assume that the page isn't fully loaded by the time the script is executed. Every time a new widget is generated the above script is called like this:

$(document).ready(styleWidget(3, 225, 169, 'id-871206010'));

This fixed it:Why does Firefox 5 ignore document.ready? It seems like reloading the page did not trigger the .ready() function.

Community
  • 1
  • 1
renver
  • 1
  • 1
  • Why don't you just directly call them in order? (Why is this tagged "multithreading"?) – nnnnnn Feb 06 '13 at 11:29
  • I call them in order: recalc = bigItemRecalc(recalc, idBase, innerHeight, i); firstCheck(recalc, idBase, i); lastCheck(recalc, idBase, itemAmount, i); truncateItems(totalHeight, widgetHeight, idBase, i); But Jquery doesn't wait for a previous function to complete. – renver Feb 06 '13 at 11:36
  • There's nothing asynchronous about this code, so everything will do what you ask. Functions *do* execute sequentially. – Reinstate Monica Cellio Feb 06 '13 at 11:37
  • When the code was originally written in one function some code was skipped. I added an alert to check some variables and suddenly the code was executed perfectly. I presume the delay created by the alert caused the code to execute fine. After some research I discovered that the jQuery calls were most likely not completed before the other took place. – renver Feb 06 '13 at 11:43
  • _"how to execute a number of simple functions sequentially"_ - There is no special trick to it: just call them in order. Although there are some jQuery functions that kick of an asynchronous process, e.g., Ajax and animation methods, none of those are used by the code you've shown. For what you've shown it will execute sequentially. – nnnnnn Feb 06 '13 at 11:46
  • Couldn't it be possible that executing this code about 28 times in a row can cause issues? This code is used to position items inside widgets and it's executed for each item of each widget. – renver Feb 06 '13 at 11:49
  • Why don't you update your question to show how you tried to call the functions? Because no, executing the code x times in a row should make no difference (assuming no errors occur). Everything you've shown so far is _synchronous_ so will happen in order. – nnnnnn Feb 06 '13 at 11:51
  • I updated my question to include the function that calls them. Originally the code inside the functions wasn't in separate functions but I tried separating them and using .ready(), which failed. – renver Feb 06 '13 at 12:01

0 Answers0