Javascript 更改div'；s html，并在函数运行时显示它

我有一个表，每行有一个

select

form元素。我想通过单击按钮更改所有选定值，以便所有

select

元素都具有相同的选定值。我用这个函数实现了它（点击按钮时调用它）：

这适用于行数较少的情况。但是当我有大约1000行时，更改所有选择大约需要10秒钟，同时浏览器看起来崩溃了

我认为，当用户单击按钮时，至少应该在div中显示一个微调器，并在所有选择都已更改时将其删除。我做了以下工作：

function setStatus(s) {
    $('#somediv').html('<i class="fa fa-spinner fa-spin"></i>');
    $('select').val(s).change();
    $('#somediv').html('');
}

功能设置状态{
$（'#somediv'）.html（''）；
$（'select'）.val（s.change（）；
$（'#somediv'）.html（''）；
}

---

但是用户的结果与之前完全相同：在缓慢的

.change（）

函数执行开始之前，div的内容不会被替换（和/或显示）。我还尝试将每一行放在一个单独的函数中，但没有成功。

解决此问题的一种方法是将

.html（）

替换为

.fadeIn（）

。通过这种方式，您可以淡入并在完成时运行更改功能，而不是将空的

更改为图标

也就是说，您可以使用

CSS:

#somediv{display:none；}

JS:

---

下面是一个JSFIDLE:

只是想知道…1000个select元素是如何/为什么同时被访问的？每一行对应于某个活动中注册的主题。最后，管理员必须确定谁参与、谁没有参与以及其他一些可能的状态。大约有95%的人参与，因此有一个按钮可以方便地一次设置所有雕像，然后更改“其他雕像”

function setStatus(s) {
    $('#somediv').html('<i class="fa fa-spinner fa-spin"></i>');
    $('select').val(s).change();
    $('#somediv').html('');
}

$(document).ready(function(){
  $("button").click(function() {
    $("#somediv").fadeIn(300, function() {
      alert("hello");
    });
  });
});