javascript - 如何在调用下一个 Javascript 函数之前更新浏览器？

Question

我在从函数中获取所需的功能时遇到了一些麻烦...基本上，我对 AJAX 函数进行了两次调用(由 Oracle APEX 提供，因此我无法更改这些函数)，但是它们'需要一段时间。我想在 Action 进行时展示标准的 AJAXy 旋转 gif，但我运气不太好。这是我到目前为止所拥有的:

function paginate(reportIDs, startRecord)
{
 //block access to the UI and show a "please wait" message
  $.blockUI({ css: { 
            border: 'none', 
            padding: '15px', 
            backgroundColor: '#000', 
            '-webkit-border-radius': '10px', 
            '-moz-border-radius': '10px', 
            opacity: .5, 
            color: '#fff' 
        } });

  //make the two AJAX calls to the APEX provided function
  for(var i = 0;i<reportIDs.length;i++)
  {
    $a_report(reportIDs[i], startRecord, ITEMS_PER_PAGE, ITEMS_PER_PAGE);
  }

  //clean up some APEX garbage on the page
  formatPage();

  //make the "please wait" message go away
  $.unblockUI;
}

我目前遇到的具体问题是，UI 的阻塞似乎仅在 AJAX 调用完成后才会发生。然后它永远不会解锁...有什么想法吗？

Answer 1

将您的 ajax 包装在另一个方法中，并将该方法延迟 1 毫秒

function paginate(reportIDs, startRecord)
{
    //block access to the UI and show a "please wait" message
    $.blockUI({ css: { 
            border: 'none', 
            padding: '15px', 
            backgroundColor: '#000', 
            '-webkit-border-radius': '10px', 
            '-moz-border-radius': '10px', 
            opacity: .5, 
            color: '#fff' 
        }
    });
    setTimeout(function(){
        //make the two AJAX calls to the APEX provided function
        for(var i = 0;i<reportIDs.length;i++)
        {
            $a_report(reportIDs[i], startRecord, ITEMS_PER_PAGE, ITEMS_PER_PAGE);
        }

        //clean up some APEX garbage on the page
        formatPage();

        //make the "please wait" message go away
        $.unblockUI();
   }, 1);
}