Question

我有这段代码：

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

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

Answer 1

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

您可以通过在文本更新和compilation：

之间引入非常短暂的延迟来解决此问题

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

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

如果可以，请考虑将compilation移至网络工作者（spec | MDN），这样您根本不必阻止主UI线程。

Answer 2

似乎DOM更新不同步（编辑：不完全，请参阅注释），因此它会在div中的文本更改之前开始执行您的函数（compilation（））。作为解决方法，您可以将其添加到超时，例如以下

$( () => {
  $( "#drawingSurface" ).mousedown(function(event) {
  	console.log('hi');
  	$('.infoText').text('Started! Please Wait..');
    setTimeout(doWork, 1);
  });
});



function doWork() {
	let i = 0;
  while (i < 1e3) {
  	console.log('waiting');
    i++
  }
  $('.infoText').text('Done.');
  console.log('finished');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="drawingSurface">
  Click me
</div>

<div class="infoText">
text
</div>

Answer 3

或者，您可以移动'$（'。infoText'）。text（'Started！Please Wait ..'）;'在编译功能中。

奇怪的jQuery行为。鼠标按下而不是调用.text（）

3 个答案: