1

Background

I have approximately 1000 elements, some of which I need to toggle between visible and not visible, trigger by a checkbox changing.

I've read through the different approaches to doing this (.hide()/.show(), .toggle(), .addClass('hidden'), .css('display','block'), etc). I've tried them all. The class changing seems to be the best, but even with this method, after a tap, there is lag for about a second with nothing appearing to happen. When the checkbox and elements change.

Code

I have a list of products, some retired and some active. The retired products have class of .retired, and the active have a class of .active.

Additionally, every active row has a class of .hidden. This class simply has the style of display:none.

HTML:

<li id="1" class="hidden active"></li>
<li id="2" class="hidden active"></li>
<li id="3" class="retired"></li>
<li id="4" class="hidden active"></li>

CSS:

.hidden {
    display:none;
}

My jQuery is currently:

$('#show-only-retired').change(function(event){
    if ( $(this).prop('checked') ) {
        $('li.active').addClass('hidden');
    } else {
        $('li.active').removeClass('hidden');
    }
});

Goal

I'd like to have the checkbox immediately change on tap, and a loading icon appear beside it, with the loading icon disappearing after the change changeover is complete. I can't find a way to tap into the beginning and end of the process of toggling the class.

Question

Is it possible?

Community
  • 1
  • 1
Kelderic
  • 6,502
  • 8
  • 46
  • 85
  • It's hard to tell what might be causing the lag without seeing your code; could you share it? Also, with that many elements you're probably going to have trouble avoiding lag no matter what; have you considered paginating your elements so they aren't all in the DOM at the same time? – Hayden Schiff Aug 17 '15 at 20:38
  • I will post code in a few minutes when I get back to the computer. I'd like to avoid pagination if at all possible, but if I have to go that route I can. – Kelderic Aug 17 '15 at 20:56
  • Code examples added. – Kelderic Aug 17 '15 at 21:44
  • It looks like you've tried every which way to speed it up with no luck. I'd suggest just putting something at the top of your change function that unhides a throbber or something, and then have something at the end of the function that rehides the throbber. If you're having trouble with the throbber not appearing, you might use jQuery animation queues or a series of setTimeout()s to make the showing/hiding of the 1000 elements happen in a separate thread, so it doesnt prevent the throbber from showing and hiding at the correct times. – Hayden Schiff Aug 17 '15 at 21:54

1 Answers1

1

I've used this approach with good success: Prevent long running javascript from locking up browser.

You break your task up using setTimouts. That way, you periodically return control to the browser and prevent the "locked up" effect.

Here is a good example from another question:

function test(i, ar, callback, start){
if ( ar === undefined ){
    var ar = [],
    start = new Date;
};
if ( ar.length < i ){
    // **** process a block **** //
    for(var x=0; x<50 && ar.length<i; x++){
        ar.push( i - ( i - ar.length )  );
    }
    setTimeout(function(){
        test( i, ar, callback, start);
    },0);
}
else {
    callback(ar, start);
};
}
Community
  • 1
  • 1
Clayton Leis
  • 1,288
  • 9
  • 20