Question

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

Answer 1

Show接受回调函数作为参数。见下面的例子。

jQuery.show() documentation

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

Answer 2

如何在调用函数之前执行.show（）？

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

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

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

在您退回浏览器之前不调用该功能，您可以让浏览器有机会更新显示。

请注意，当函数绑定时，微调器可能没有动画，这取决于浏览器。您可能更喜欢显示静态但看起来动态的内容（“更快”条纹的方式）以避免浏览器之间的不一致。

使用50ms的实例：

$("#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>

jQuery显示未按预期执行

2 个答案: