Question

这是一个非常一致的问题，我们已经挣扎了很长一段时间。

该页面使用fgnass微调器。该页面建立在角度上。当执行任何类型的冗长dom操作时，我尝试调用微调器，然后执行所述dom操作（例如，调用分页或搜索相当大的数据集）。这些动作可能需要几秒钟，因此是微调器的原因：因此用户知道正在发生的事情，并等待。

我尝试做的是。

function callSpinner()
{
    j$("div[class^='ui-dialog']").addClass('dialog_spinner');
    j$("div[class^='ui-dialog-buttonpane ui-widget-content']").css("display", "none");
    j$('#progressSpinner').dialog('open');
}
function closeSpinner()
{
    j$('#progressSpinner').dialog('close');
    j$("div[class^='ui-dialog']").removeClass('dialog_spinner');
}

这是使用Michael Bromley发现的角度分页库here.这发生在他的库的scope.setCurrent函数中。

scope.setCurrent = function(num) {
callSpinner();
paginationService.setCurrentPage(paginationId, num);
closeSpinner();
}

也就是说，它也会出现标准的角度滤镜。

这是在页面创建时调用的createSpinner方法（我还在页面加载时启动微调器一次）

function CreateSpinner()
{
    // initialize spinner.
var opts = {
    lines: 13, // The number of lines to draw
    length: 15, // The length of each line
    width: 5, // The line thickness
    radius: 15, // The radius of the inner circle
    corners: 1, // Corner roundness (0..1)
    rotate: 0, // The rotation offset
    direction: 1, // 1: clockwise, -1: counterclockwise
    color: '#E68A2E', // #rgb or #rrggbb or array of colors
    speed: 1, // Rounds per second
    trail: 60, // Afterglow percentage
    shadow: false, // Whether to render a shadow
    hwaccel: false, // Whether to use hardware acceleration
    className: 'spinner', // The CSS class to assign to the spinner
    zIndex: 2e9, // The z-index (defaults to 2000000000)
    top: '50', // Top position relative to parent in px
    left: '30' // Left position relative to parent in px
};
var target = document.getElementById('progressSpinner');
$spinner = new Spinner(opts).spin(target);
j$("div[class='ui-widget-overlay ui-front']").addClass('overlay_style1');
}

这是我要定位的微调标签的HTML。

<div id="progressSpinner" title="Progress" style="display: none; background-color: #000000; z-index: 1200; opacity: 0.8; padding: 0;"></div>

实际上发生了什么，它是否会触发分页动作，并在分页过程完成之前等待调整旋转器。所以页面什么都不做，页面完成，表单更新，然后旋转器启动，然后关闭。

正如我所说，我在页面加载时创建微调器，然后在页面准备时调用callSpinner函数。这很好。

我可以随时调用callSpinner，它也可以正常工作。

我甚至可以在控制台中打开微调器，然后触发分页点击，旋转器继续旋转。

Answer 1

经过多次尝试做不同的事情后，我终于开始工作了。在任何时候，我的代码都没有特别的错误。如果我在

的每个代码行放置调试中断

callSpinner();
paginationService.setCurrentPage(paginationId, num);
closeSpinner();

一切都有效。

我终于知道发生了什么，浏览器会同时获取所有3行代码。并且它决定将setCurrentPage函数运行在其他所有内容之上更重要。所以它对整个事物进行分页，然后它将运行callSpinner（）;然后它会立即关闭旋转器。

我的解决方案：

callSpinner();
setTimeout(function () {
    scope.$evalAsync(
        function( scope ) {
            paginationService.setCurrentPage(paginationId, num);
            closeSpinner();
        }
    );
}. 200);

推理：尽可能接近，通过短暂的延迟将分页调用置于超时，它确保了callSpinner（）;在做其他任何事情之前执行。

最初，我刚刚超时，但是一旦超时中的代码被调用，它就会触发closeSpinner（）;首先行，然后进行分页调用。所以我在它上面使用了Angular的$ evalAsync，这让它正确。

JS微调器仅在操作完成后显示

1 个答案: