when `each` finished, start another `each`

Question

I'm trying to do the next thing: when first part finished (including the function AccountClicked that gets details from the server), start the second part.

how can I do it please?

    // first part
    $('#accountsTable li input').each(function () {
        isGetLastSearchOperation = true;
        var accountId = $(this).attr('id');
        if ($.inArray(accountId, LastSearchedAccountsIds) > -1) {
            AreClickedButtonsEnable = true;
            $(this).attr('checked', true);
            AccountClicked(this);
        }
        // uncheck the other goals
        else {
            $(this).attr('checked', false);
        }
    });

    // second part
    $('#commercialGoalsTable li input').each(function () {
        isGetLastSearchOperation = true;
        var goalId = $(this).attr('id');
        if ($.inArray(goalId, LastSearchedGoalsIds) > -1) {
            AreClickedButtonsEnable = true;
            $(this).attr('checked', true);
            //CommercialGoalClicked(this);
        }
        // uncheck the other goals
        else {
            $(this).attr('checked', false);
        }
    });

any help appreciated!

Javascript is single threaded, and there is no aysn requests. so that is what it does. — bingjie2680, Mar 18 '14 at 17:04
Yeah, I was about to say... When it finishes executing a line, doesn't it move on to the next line, like almost every other programming language? — Taegost, Mar 18 '14 at 17:05
@bingjie2680 you are wrong, the 2nd loop will start before each function returns — Hogan, Mar 18 '14 at 17:05
I don't need to make a test... here is an example question that uses promise to solve this promblem -- I believe this is a duplicate: http://stackoverflow.com/questions/11006732/jquery-promise-in-function-with-each — Hogan, Mar 18 '14 at 17:08
this is the test: http://jsfiddle.net/bingjie2680/75WPh/, see the console.log — bingjie2680, Mar 18 '14 at 17:13
@bingjie2680 - that fiddle does not have an asnyc function in the first each. I'll make you an example. — Hogan, Mar 18 '14 at 17:14
@Hogan That's the point. `.each()` is not async. Functions called in the `.each()` callback could be async, but `.each()` is not async. — Jason P, Mar 18 '14 at 17:15
I know. but neither does the question from what we can see. unless the AccountClicked is an async request. — bingjie2680, Mar 18 '14 at 17:16
@hogan it does. It doesn't wait for any contained asynchronous operations, but I can't see any. — John Dvorak, Mar 18 '14 at 17:16
He edited the question to add _"including the function AccountClicked that gets details from the server"_. I assume that's the async part. — Jason P, Mar 18 '14 at 17:16
you are right; @JasonP, the question must be updated when we were discussing. :) — bingjie2680, Mar 18 '14 at 17:21
Here is the example fiddle... but I see it is a moot point. It was clear to me from the start he had internal async to have to problem -- But I guess I assume the best. http://jsfiddle.net/bingjie2680/75WPh/ — Hogan, Mar 18 '14 at 17:24

Jason P · Accepted Answer · 2014-03-18T17:32:18.177

3

The best solution would probably be to change up your code so you can send one ajax request.

Since AccountClicked() uses ajax and is async, I would first change that function to return a promise object, then do wait until all of the promises have been resolved like so:

var promises = [];

// first part
$('#accountsTable li input').each(function () {
    isGetLastSearchOperation = true;
    var accountId = $(this).attr('id');
    if ($.inArray(accountId, LastSearchedAccountsIds) > -1) {
        AreClickedButtonsEnable = true;
        $(this).attr('checked', true);
        promises.push(AccountClicked(this));
    }
    // uncheck the other goals
    else {
        $(this).attr('checked', false);
    }
});

$.when.apply(null, promises).done(function () {

    // second part
    $('#commercialGoalsTable li input').each(function () {
        isGetLastSearchOperation = true;
        var goalId = $(this).attr('id');
        if ($.inArray(goalId, LastSearchedGoalsIds) > -1) {
            AreClickedButtonsEnable = true;
            $(this).attr('checked', true);
            //CommercialGoalClicked(this);
        }
        // uncheck the other goals
        else {
            $(this).attr('checked', false);
        }
    });

});

A couple of simple options for returning a promise from a function:

function AccountClicked() {
    return $.ajax({
        // ...
    });
}

function AccountClicked() {
    var def = $.Deferred();

    $.ajax({
        // ...
    }).done(function() {
        def.resolve();
    });

    return def.promise();
}

edited Mar 18 '14 at 17:32

answered Mar 18 '14 at 17:11

Jason P

26,984
3
31
45

thank you but it doesn't work.. it entered the second part before the `accountclicked` calls finished.. – Alon Shmiel Mar 18 '14 at 17:20
Did you change `AccountClicked` to return a promise, and resolve the promise when the ajax function has completed? – Jason P Mar 18 '14 at 17:22
_"yes, I copied what you wrote.."_ - That seems to be a self-contradicting statement. My answer doesn't contain the code for the `AccountClicked()` function that you need to change. – Jason P Mar 18 '14 at 17:28
sorry, I didn't understand you.. how can I return a promise? `return promise;`? – Alon Shmiel Mar 18 '14 at 17:29
1

I updated my answer with a couple of simplified examples of returning a promise. – Jason P Mar 18 '14 at 17:32
This is a great answer and clear about how to add in a promise (with the examples) I took out the close vote because this is clearer. – Hogan Mar 18 '14 at 17:38

ntgCleaner · Answer 2 · 2014-03-18T17:12:32.040

You could just add an if statement at the end of your first each loop that find the number of elements, when it reaches that high number, start the next each loop.

// first part
var numElem = $('#accountsTable li input').length;
$('#accountsTable li input').each(function (e) {//Notice the 'e' in this function for your index number
    isGetLastSearchOperation = true;
    var accountId = $(this).attr('id');
    if ($.inArray(accountId, LastSearchedAccountsIds) > -1) {
        AreClickedButtonsEnable = true;
        $(this).attr('checked', true);
        AccountClicked(this);
    }
    // uncheck the other goals
    else {
        $(this).attr('checked', false);
    }
    if(e>=numElem-1){
            // second part
        $('#commercialGoalsTable li input').each(function () {
            isGetLastSearchOperation = true;
            var goalId = $(this).attr('id');
            if ($.inArray(goalId, LastSearchedGoalsIds) > -1) {
                AreClickedButtonsEnable = true;
                $(this).attr('checked', true);
                //CommercialGoalClicked(this);
            }
            // uncheck the other goals
            else {
                $(this).attr('checked', false);
            }
        });
    }
});

EDIT :: Forgot zero position, edited the if statement to take care of that.

Here's a fiddle of an example http://jsfiddle.net/L4asQ/

Isn't this different... you have the 2nd loop in the first loop. — Hogan, Mar 18 '14 at 17:11
this does exactly as he asks, Do the first part, then when it finishes, do the second part. — ntgCleaner, Mar 18 '14 at 17:13

when `each` finished, start another `each`

2 Answers2