изменить текст кнопки начальной загрузки перед рендерингом d3 svg object

Question

У меня есть код, предназначенный для визуализации некоторых сложных данных. Сначала пользователь выбирает файл данных для загрузки; после нажатия кнопки загрузки страница генерирует кнопку «plot» с обработчиком события onclick с функцией renderPlots().

Когда пользователь нажимает кнопку «plot», все графики создаются правильно, и я счастлив. Однако в случае большего набора данных процесс построения графика может занять несколько секунд, поэтому я хотел бы изменить текст кнопки на что-то вроде «рендеринга ...», в то время как графики генерируются так, что пользователь знает их сюжеты в пути.

Согласно документации начальной загрузки для динамического изменения текста кнопки, я пытался что-то вроде

function renderPlots() { 
    $("#render").button("loading"); 

    rest of code that does all the D3 plot generating...; 

    $("#render").button("reset"); 
} 

Проблемы с приведенным выше кодом является то, что он фактически не изменяет текст кнопки первого, это делает вещи асинхронно, и я нахожусь в недоумении, как я могу заставить текст кнопки меняться на экране, прежде чем начнется какое-либо построение графика.

Любые мысли?

Answer 1

На самом деле, если я понял проблему, все работает синхронно - не является синхронно - вот почему браузер не получает возможности обновить DOM новым текстом кнопки перед запуском большой задачи обработки , Если бы вы были console.log текст кнопки где-то между двумя вызовами до .button(), вы увидите, что текст установлен на "loading"; он просто не появился.

Если да, то с помощью setTimeout чтобы задержать начало обработки до следующего «кадра» будет решить проблему:

function renderPlots() { 
    $("#render").button("loading"); 
    setTimeout(function() { 
    // rest of code that does all the D3 plot generating...; 
    $("#render").button("reset"); 
    }, 100); // even 0 will do the trick 
}