javascript - JQuery 在事件开始时应用 css 函数，在结束时恢复

Question

我有一个函数需要很长时间才能执行，我想应用 css 更改，以便用户知道网站正在加载。我有一个链接到下拉过滤器的更改功能，该过滤器对页面上的数据进行排序。

$("#job_group").change(function() {
        console.log("Change");
        $("#displayTable").css("opacity", "0.5"); // gray out the table while this is executing
        // Some code that executes
        showResults();
        $("#displayTable").css("opacity", "1"); // put it back to normal once its done
        console.log("All done");
});

控制台日志以我正在尝试执行的行为在控制台中输出，但第一个 css 更改基本上被忽略，因为它正在更改并立即恢复，即使代码仍然需要时间来执行。

最终，应该发生的是:

• 改变函数执行
• 使表格不透明
• 筛选出结果
• 将表格恢复为正常不透明度

编辑

Show Results 获取结果数

function showResults() {
        let count = 0;
        $(".jd-row").each(function() {
        if($(this).css("display") !== "none" && !$(this).hasClass("jd-row-expand")) {
            count++;
        }
    });
    $("#results").html(count + "");
}

Answer 1

鉴于 showResults() 中的逻辑是同步的，您需要将其置于超时状态，以便 JS 有时间在线程被 each() 阻塞之前更新 DOM 循环。您还需要在此超时内重置不透明度。试试这个:

$("#job_group").change(function() {
  var $table = $("#displayTable").css("opacity", "0.5");
  setTimeout(function() {
    showResults();
    $table.css("opacity", "1");
  }, 50);     
});

但是，值得一提的是，长时间运行的同步操作远非理想。如果可能，我建议使逻辑异步。更好的是，移动过滤服务器端并使用 AJAX。