Question

我想做些简单的事情：

基本上，我切换加载程序元素的可见性，然后通过等待10秒钟来模拟事物的处理，最后再次切换可见性。我的问题是我想在testLoader回调函数中强制重绘，但到目前为止，仅在回调完成执行后才进行元素的更新。在执行按钮回调时是否可以重绘？

testLoader : function() {
  var loader = document.getElementById("loader")
  var loaderVisibility = loader.style.visibility;

  if (loaderVisibility == "visible") {
    loader.style.visibility = "hidden"
  } else {
    loader.style.visibility = "visible"
  }

  var ms = 10000;
  var start = new Date().getTime();
  var end = start;
  while (end < start + ms) {
    end = new Date().getTime();
  }

  if (loaderVisibility == "visible") {
    loader.style.visibility = "hidden"
  } else {
    loader.style.visibility = "visible"
  }
}

<input type="button" id="testLoaderButton" value="Test Loader" onClick="testLoader()" />

Answer 1

使用setTimeout，并且不要使用while

阻止事件循环

function testLoader() {
	var loader = document.getElementById("testLoaderButton");
	var loaderVisibility = loader.style.visibility;
	loader.style.visibility = "hidden";
	setTimeout(function () {
		loader.style.visibility = "visible";
	}, 1000);
}

<input type="button" id="testLoaderButton" value="Test Loader" onClick="testLoader()" />

Answer 2

最后，我提出了以下解决方案：

testLoader : function()
{
    var loader = document.getElementById("loader");
    loader.style.visibility = "visible";
    setTimeout(function () {
        do_processing()
        loader.style.visibility = "hidden";
    }, 500)
}

基本上，我使用setTimeout在另一个线程中执行代码，因此不阻塞javascript UI。 PS：我知道Web Workers允许在javascript中模拟线程的创建，但是我不希望将代码重组为不同的文件。

如何在javascript的回调中强制重绘元素？

2 个答案: