javascript - 如何在昂贵的计算任务之前在点击时将文本附加到 DOM

Question

我有一个函数可以对点击事件执行非常昂贵的计算任务。我想在调用此函数之前将一些文本附加到 DOM。像这样的东西：

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

出于某种原因，在完成昂贵的计算任务之前，文本不会附加到 DOM 中。为什么会这样，我该如何解决？

Answer 1

setTimeout打电话时如何使用run()

Answer 2

文本确实会立即附加 - 只是浏览器在您执行完 javascript 之前不会刷新屏幕（它正在等待查看您是否正在对 DOM 进行更多更改，以便它可以为所有更改重排和重绘一次）。

让屏幕立即刷新的方法是立即返回并run()以非常短的方式开始，setTimeout()如下所示：

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

Answer 3

我不确定为什么会这样，但为什么不把电话推迟到run你附加文本之后呢？尝试这样的事情：

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