切换可见性1000+；使用Javascript的元素，与启动和停止事件异步（用于加载图标） 背景

我有大约1000个元素，其中一些元素需要在可见和不可见之间切换，通过更改复选框触发

我已经阅读了不同的方法（

.hide（）

/

.show（）

，

.toggle（）

，

.addClass（'hidden'）

，

.css（'display'，'block'）

，等等）。我都试过了。改变类似乎是最好的，但即使使用这种方法，在点击后，也会有大约一秒钟的延迟，似乎什么都没有发生。当复选框和元素更改时

代码 我有一个产品列表，有些是退役的，有些是现役的。失效产品的类别为

.retired

，而活动产品的类别为

.active

此外，每个活动行都有一类

.hidden

。这个类的样式就是

display:none

HTML:

我的jQuery当前为：

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

---

目标 我想让复选框立即改变点击，并加载图标旁边出现，加载图标消失后，改变完成。我找不到一种方法来进入切换类过程的开始和结束

---

问题:

---

有可能吗？

我已经成功地使用了这种方法：

您可以使用设置超时来分解任务。这样，您可以定期将控件返回到浏览器并防止“锁定”效果

以下是一个很好的例子：

功能测试（i、ar、回调、启动）{
如果（ar==未定义）{
var ar=[]，
开始=新日期；
};
如果（ar长度对于（var x=0；xIt在没有看到代码的情况下很难判断是什么导致了延迟；你能分享它吗？而且，有这么多的元素，你可能很难避免任何延迟；你有没有考虑过对元素进行分页，这样它们就不会同时出现在DOM中？我会在几分钟后回到e计算机。如果可能的话，我想避免分页，但如果必须这样做，我可以。添加了代码示例。看起来您已经尝试了各种方法来加速它，但没有成功。我建议您在更改函数的顶部添加一些内容，以消除抖动或其他内容，然后在函数的末尾添加一些内容这会重新定义throbber。如果throbber不出现，您可能会使用jQuery动画队列或一系列setTimeout（）在单独的线程中显示/隐藏1000个元素，因此不会阻止throbber在正确的时间显示和隐藏。
.hidden {
    display:none;
}

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

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);
};
}