Javascript 如何为长时间的非ajax操作显示忙碌指示器？

我有一个在客户端上运行2-3秒的函数（没有ajax调用）。 我试图在运行此操作时显示“忙/处理”动画

简化代码如下：

var ajaxContainer = $('.spinner');
// show
$(ajaxContainer ).show();

// long operation
var items = GetItems();
$.each(items, function (index, value) {
    ProcessItem(value.itemID);
});

// hide
$(ajaxContainer ).hide();

但这并不像预期的那样有效。我得到的结果是，操作运行时没有显示微调器。虽然在操作结束时会显示

我在网上看到一些帖子提到，这可以通过使用windows.setTimeout（）来实现。但由于此操作是基于项目的动态数量，因此我不希望预先设置特定的超时数。相反，我希望在操作开始时显示微调器，并在操作完成时隐藏它

---

有没有一种优雅的方法可以实现这一点？

您不能在同步操作中显示微调器，因为它会阻塞UI（ajax是异步的，这就是它工作的原因）

---

您需要的是将代码放入。

我认为您必须向

ProcessItem

函数添加一个回调参数，以检查是否已处理所有项目。试着这样做：

function ProcessItem(id, callback){
    //do process and after call callback function 
    callback(); 
}

var processedItemsQuantity = 0;
var ajaxContainer = $('.spinner');
ajaxContainer.show();
// long operation
var items = GetItems();
$.each(items, function (index, value) {
    ProcessItem(value.itemID, function(){ 
        if (items.length - 1 == processedItemsQuantity){
            ajaxContainer.hide();
        } 
        else processedItemsQuantity++;
    });
});

---

您的长操作是同步的还是异步的？同步的。它基本上是一个$.each（）循环。请发布长操作的代码。如果它是同步的和阻塞的，您所要做的就是在代码执行之前显示一个微调器，然后在代码执行之后删除？据我所知，同步操作将始终锁定UI（意味着显示不会同时更新）。如果你想让UI保持交互，你必须做一些事情使其异步（我自己从来没有尝试过，否则我会把它作为一个答案发布）我不明白这是如何解决问题的？所以我不明白投票结果如何？显然，如果使用相同的ajaxContainer.hide（），则会处理所有项目；是否在$.each方法后调用？我认为问题不仅仅在于隐藏容器，因为作者说“我得到的结果是操作运行时没有显示微调器。尽管它确实显示操作结束的时间。”@MaunoV。这是一个异步进程，在本例中，不能在每个方法$之后显示微调器。如果这样做，您将永远看不到微调器，因为它隐藏得太快（项目仍在处理中）。处理完最后一个项目后，你必须隐藏微调器。好的。有兴趣听取本主题作者的评论：）。不知道它是否有效，我假设长时间的操作是同步的，我想这只是我的错误。