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

【问题标题】：JS spinner only shows after action completesJS 微调器仅在操作完成后显示
【发布时间】：2016-02-19 01:49:22
【问题描述】：

这是我们长期以来一直在努力解决的一个相当一致的问题。

页面使用fgnass 微调器。该页面建立在角度上。在执行任何类型的冗长 dom 操作时，我尝试调用 spinner，然后执行所述 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();
}

也就是说，标准的 Angular 过滤器也会发生这种情况。

这是在页面创建时调用的 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，它也可以正常工作。

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

【问题讨论】：

真正的代码在哪里？我们无法猜测您的功能是做什么的或微调器是如何集成的
请您提供某种链接到您的实际代码吗？（网站或 JSfiddle）。您的伪代码似乎没有问题。
添加了很多真实的代码。应该足够了（我希望）。不知道如何设置一个 JSFiddle 与我需要的数据大小的绝对范围，我不能分享实际的网站。

标签： javascript jquery angularjs spinner

【解决方案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，结果它运行良好。

【讨论】：