jQuery show not executing when expected

Question

У меня есть приложение APEX с кнопкой, которая вызывает функцию javascript. Функция выполняет скрипинг экрана и занимает несколько секунд. Я хочу сначала отобразить значок прядильщика, чтобы обеспечить ощущение, что что-то происходит. Однако, несмотря на то, что у меня есть показания spinner с вызовом jquery .show() до вызова функции, они, похоже, оба выполняются одновременно ... через секунды после нажатия кнопки. Это похоже на то, что jquery .show() не будет выполняться до завершения вызова функции. Как я могу выполнить .show() перед вызовом функции? Я даже попытался добавить .show() в первую строку функции, но результат тот же. Spinner не отображается, пока функция не завершится.

Answer 1

Показать принимает функцию обратного вызова в качестве параметра. См. Пример ниже.

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>