Question

我有一个在客户端上运行2-3秒的功能（没有ajax调用）。我试图展示＆＃34;忙/处理＆＃34;此操作正在运行时动画。

简化代码如下：

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

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

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

但是这不能按预期工作。我得到的结果是操作运行而不显示微调器。虽然它确实显示了操作何时结束。

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

是否有一种优雅的方式来实现这一目标？

Answer 1

我认为您必须向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++;
    });
});

Answer 2

您无法在同步操作中显示微调器，因为它阻止了UI（ajax是异步的，这就是它起作用的原因）。

您需要将代码放在Web Worker。

中

如何为长期非ajax操作显示忙碌指示器？

2 个答案: