Как добавить текст в DOM по клику перед дорогой вычислительной задачей

Question

У меня есть функция, которая выполняет очень дорогую вычислительную задачу для события щелчка.Я хотел бы добавить текст в DOM прямо перед вызовом этой функции.Примерно так:

$("#button2").click(function() {
    $('#progress').append('<p>Computing…</p>');
    run(); // Expensive computational task.  
    return false;
});

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

Answer 1

Текст добавляется сразу же - просто браузер не обновляет экран до тех пор, пока вы не закончите выполнение javascript (он ждет, чтобы увидеть, вносите ли вы больше изменений в DOM, чтобы он мог перекомпоноваться и перекраситься один раз за все изменения).

Чтобы заставить экран обновиться сразу же, нужно немедленно вернуться и запустить run() на очень коротком setTimeout(), например так:

$("#button2").click(function() {
    $('#progress').append('<p>Computing…</p>');
    setTimeout(run, 1); // Expensive computational task.  
    return false;
});

Answer 2

Как насчет использования setTimeout при звонке run()

Answer 3

Я не уверен, почему это так, но почему бы не отложить вызов на run, пока вы не добавите текст?Попробуйте что-то вроде этого:

$.when($('#progress').append('<p>Computing…</p>')).then(run);