jQuery 显示未按预期执行

Question

我有一个 APEX 应用程序，其中包含一个调用 javascript 函数的按钮。该功能正在进行一些屏幕抓取，需要几秒钟才能完成。我想首先显示一个微调器图标，以提供正在发生某些事情的感觉。但是，即使我在函数调用之前通过 jquery .show() 调用显示微调器，它们似乎都同时执行了……在单击按钮后几秒钟。就好像 jquery .show() 在函数调用完成之前不会执行。如何让 .show() 在调用函数之前执行？我什至尝试将 .show() 添加到函数的第一行，但结果是一样的。微调框直到函数完成后才会显示。

Answer 1

How do I get the .show() to execute prior to the call to the function?

您调用 .show，然后在调用该函数之前返回给浏览器一小段时间，如下所示：

function buttonHandler() {
    $("...").show();
    setTimeout(theFunction, 0);
}

您必须尝试使用您的目标浏览器来确定您是否需要大于 0 的值。该值以毫秒为单位，因此任何高达 50 左右的时间对于人类来说基本上是不可察觉的。

在您返回浏览器之前不调用该函数，您就给了浏览器更新显示的机会。

请注意，当函数绑定时，微调器可能不会动画，这取决于浏览器。您可能更喜欢显示静态但动态的东西（"go faster" 条纹的方式）以避免浏览器之间的不一致。

使用 50 毫秒的实例：

$("#the-button").on("click", buttonHandler);
function buttonHandler() {
  $("#spinner").show();
  $("#done").hide();
  setTimeout(theFunction, 50);
}
function theFunction() {
  var target = Date.now() + 1000;
  while (Date.now() < target) {
    // Do nothing, we're just simulating a busy function
  }
  $("#spinner").hide();
  $("#done").show();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="button" id="the-button" value="Click me">
<div id="spinner" style="display:none">We're doing it, one sec!</div>
<div id="done" style="display:none">Function is done now</div>

Answer 2

Show 接受回调函数作为参数。请参阅下面的示例。

jQuery.show() documentation

function buttonHandler() {
    $(".spinner").show(function() {
        // this will be executed after show has completed
    });
}

jQuery 显示未按预期执行

jQuery show not executing when expected

javascript

jquery

oracle-apex