我有一个函数,它在点击事件上执行一个非常昂贵的计算任务。我想在调用此函数之前将一些文本附加到DOM中。如下所示:
$("#button2").click(function() {
$('#progress').append('<p>Computing…</p>');
run(); // Expensive computational task.
return false;
});
由于某种原因,直到代价高昂的计算任务完成后,文本才会被附加到DOM中。为什么会出现这种情况,我该如何解决?
发布于 2011-12-19 05:31:29
文本确实会立即被追加-只是浏览器不会刷新屏幕,直到你执行完javascript (它在等待,看看你是否对DOM做了更多的更改,这样它就可以回流和重新绘制所有的更改)。
让屏幕立即刷新的方法是立即返回并在非常短的setTimeout()
上启动run()
,如下所示:
$("#button2").click(function() {
$('#progress').append('<p>Computing…</p>');
setTimeout(run, 1); // Expensive computational task.
return false;
});
发布于 2011-12-19 05:11:44
在调用run()
时使用setTimeout
怎么样?
发布于 2011-12-19 05:15:58
我不确定为什么会这样,但是为什么不把对run
的调用推迟到附加文本之后呢?尝试如下所示:
$.when($('#progress').append('<p>Computing…</p>')).then(run);
https://stackoverflow.com/questions/8557334
复制相似问题