时间戳

首页 > 解决方案 > 如何在javascript的回调中强制重绘元素？

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

问题描述

我想做这样简单的事情：

基本上，我切换加载器元素的可见性，然后通过等待 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()" />

标签： javascriptcss

解决方案

使用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()" />

推荐阅读