javascript - 奇怪的 jQuery 行为。鼠标按下不调用 .text()

Question

我有这个代码:

$( "#drawingSurface" ).mousedown(function(event) {
 $('.infoText').text('Started! Please Wait..');
 compilation(); // this takes a long time.
}

现在无论我做什么，$('.infoText').text('Started! Please Wait..');都不会执行。该元素就在那里，这很烦人，因为编译需要很长时间才能完成，完成后就会显示文本。我希望文本按照我写的顺序显示。

Answer 1

它正在执行，但是当编译运行时，它会阻止浏览器更新页面的显示。

您可以通过在文本更​​新和编译之间引入非常短暂的延迟来解决此问题:

$( "#drawingSurface" ).mousedown(function(event) {
    $('.infoText').text('Started! Please Wait..');
    setTimeout(compilation, 50);
});

这样，浏览器就有机会在阻止长时间运行的编译之前显示更改。 (0 通常适用于 Chrome，但 Firefox 通常需要大约 50。YMMV。)

如果可以，请考虑将编译移至 Web Worker ( spec | MDN )，这样您就不必阻塞主 UI 线程。