Question

我有一个在文档加载上运行的函数，它将选择对象的内容复制到其他选择框（以节省网络带宽）。

该功能需要几秒钟才能完成，所以我想掩盖主div（让用户知道发生了什么事情）。

不幸的是，直到函数完成后才会显示掩码：

    // I want the mask to show immediately here, but never gets shown
    $('#unassignedPunchResults').mask('Getting results');

    $('.employeeList').each(function (i) {
        // this is freezing the browser for a few seconds, the masking is not showing
        $('#employeeList option').clone().appendTo(this);  
    });

    $('#unassignedPunchResults').unmask();

如何在mask（）调用之后中断javascript以刷新该事件并继续，这样用户可以在更长的处理（each（））处理时看到掩码？

Answer 1

将其余代码放入setTimeout(function() { ... }, 0)来电。

Answer 2

我一直在想这个问题。第一种解决方案是使用settimeout函数。

然而，它可能有点“脏”，因为你添加了任意延迟。一个更合适的逻辑是在掩码函数执行并渲染后执行$('.employeeList').each(function (i)...函数。

Jquery允许我们使用延迟函数（如then）来执行此操作，该函数在满足延迟条件后执行xecutes。

请尝试：

// I want the mask to show immediately here, but never gets shown
    $('#unassignedPunchResults').mask('Getting results').then(function(){

    $('.employeeList').each(function (i) {
        // this is freezing the browser for a few seconds, the masking is not showing
        $('#employeeList option').clone().appendTo(this);  
    });


});

通常，使用具有任意数量ms的settimeout是一种适用于简单情况的解决方案，但如果在复杂代码中有多个settimouts，则可能会出现同步问题。

Answer 3

或使用工人，但是你需要丢弃msie＆lt; 10 或者在运行时间小于500毫秒的段中分解计算，并使用setinterval在5秒内完成加载。谷歌在javascript中模拟线程代码示例。

如何中断javascript来刷新事件

3 个答案: