如何在jQuery处理其他操作时显示.gif文件?

km0tfn4u  于 2022-11-22  发布在  jQuery
关注(0)|答案(1)|浏览(109)

我想显示一个loader.gif文件,当用户单击删除按钮时,将显示loader.gif文件,然后在同一时间或下一步从视图中删除表列。我遇到的问题是,只有在删除列后才会显示loader.gif文件。

$(".removeButton").eq(i).click(function() {
  $('.loader').show(); // gif file is here
  
  let tbodyTrLength = $(".table-hideable tbody tr").length;
  
  for (let t = 0; t < tbodyTrLength; t++) {
    $(".table-hideable tbody tr").eq(t).find("td").eq(i).hide();
    $(".table-hideable thead tr:nth-child(2) th").eq(i).hide();
    $(".footer-restore-columns").removeClass("d-none");
  }
});
o8x7eapl

o8x7eapl1#

尝试在另一个线程下使用setTimeout运行它。因为主线程会很忙碌,所以它不会很漂亮。你可以为循环的每次迭代设置一个超时。
编辑:为了安全起见,我将i参数复制到了内部函数中,这样当函数运行时,它将位于作用域中。

$(".removeButton").eq(i).click(function () {
  $('.loader').show(); // gif file is here

  (function (i) {
    setTimeout(function () {

      let tbodyTrLength = $(".table-hideable tbody tr").length;
      for (let t = 0; t < tbodyTrLength; t++) {
        $(".table-hideable tbody tr").eq(t).find("td").eq(i).hide();
        $(".table-hideable thead tr:nth-child(2) th").eq(i).hide();
        $(".footer-restore-columns").removeClass("d-none");
      }

    }, 1)
  })(i);

});

相关问题