the each function

Question

hii I have a 680 buttons in a page, and I want to run a function on them all with the each function. here is the code:

$("button#check_all").button().click(function(){
    btns=$(".viewport").find('.third_cat_chb');//here are all 680 btns
    this_btn=$(this);
    count=btns.size(); //680
    cpt=0;
    btns.each(function(){
        cpt += 100/count;
        if($(this).is(".cat_chb_off")){
            $(this).trigger('click');
        }
        $("#progressbar").progressbar({ value : cpt});
    });
    $("#progressbar").hide('slow');
});

The problem is that I want to see the buttons changed immediately when I click to select them all, not to set interval but to finish each button alone and online. but what really happens is that the site is stuck over 35 seconds and I see the buttons changed suddenly.

Answer 1

here is the answer:

//check buttons:
$("button#check_all").button({
    icons: {
        primary: "ui-icon-battery-3"
    },
    text: false
}).click(function(){
    btns=$(".viewport").find('.third_cat_chb');
    this_btn=$(this);
    count=btns.size();
    move_over(0,1);
});

function move_over(i, time){
    var btn = btns.eq(i);
    cpt += 100/count;
    if(btn.is(".cat_chb_off")){
        btn.trigger('click');
    }
    $("#progressbar").progressbar({ value : cpt});

as you can see, I don't use each at all!! setTimeout(function(){ move_over(++i, time); }, time) }

Answer 2

The problem is the progressbar, you didn't simply set the value inside the each, you're initializing it on every loop.

Initialize the progressbar outside the each, inside the each only set the value:

$( "#progressbar" ).progressbar( "option", "value", cpt );

However, it will depend on the browser if you see any changes (in the progressbar or buttons), it's a really quick process with the suggested modification and usually browsers did not newly render things when you're inside a loop.