Question

我有一个表格，每行都有一个select表单元素。我想单击按钮更改所有选定的值，以便所有select元素具有相同的选定值。我用这个函数实现了它（单击按钮时调用它）：

function setStatus(s) {
    $('select').val(s).change();
}

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

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

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

但是用户的结果与之前完全相同：在慢.change()函数执行开始之前，div的内容不会被替换（和/或显示）。我还尝试将每一行放在一个单独的函数中，但没有成功。

Answer 1

解决此问题的一种方法可能是为.html()换取.fadeIn()。这种方式而不是将空<div>更改为图标，您可以将其淡入并在完成时运行更改功能。

即你可以拥有<div id="somediv"><i class="fa fa-spin fa-spinner"></i></div>

CSS：

#somediv { display: none; }

JS：

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

这是一个JSFiddle：https://jsfiddle.net/2cua5t6o/

更改div的html并在函数运行时显示它

1 个答案: