Question

我制作了一个简单的抽认卡HTML应用程序，我在三星Galaxy Tab2 7.0平板电脑上的Android互联网浏览器（默认安装）下遇到奇怪的行为问题。当元素的样式改变时，例如

$(".question").css('color', '#FFFFFF')
$(".answer").css('color', '#FFFFFF')
$(".tag").css('background-color', '#FFFFFF')

浏览器不会立即显示任何更改。稍后在代码中我将替换容器文本并计算大小以使文本适合元素。我希望这个过程是不可见的（这就是为什么我想要白色的白色）。我无法隐藏元素，因为那时计算不起作用。

我已经在Windows 7下使用Chrome和IE9对此进行了测试，它在那里运行良好。所以Android浏览器存在一些问题。当我将测试代码alert('debug');放在上面的行后面时，Android浏览器会显示消息，但元素上的颜色没有变化，但Windows 7下的浏览器会显示带有白色白色元素的消息。

如何强制Android浏览器立即反映此类样式更改？是否有一些脚本函数可用于此，或某些<meta>标记可以解决此问题？请指教。

Answer 1

如果您想“立即显示样式更改”，我猜您的意思是您的脚本将继续执行，并且您希望屏幕更新。

您需要使用延续。而不是让你的脚本继续执行，你需要屈服并继续。您可以通过将代码分解为多个函数来完成此操作，并通过为下一个部分设置超时来完成每个部分。这是一个简单的例子。当使用循环完成此操作时，所有x都会立即出现。使用延续时，一次出现一个x。

<html>
<script>
function using_a_loop() {
   var e = document.getElementById('spot');
   for (var i = 0; i < 1000; ++i) {
      e.innerText += ' x';
   }
}

function using_continuations(i) {
   var e = document.getElementById('spot');
   i = i || 0;  // start at 0 when i not provided
   e.innerText += ' x';
   ++i;
   if (i < 1000) {
       setTimeout(function() { using_continuations(i); }, 0);
   }
}
</script>
<div id="spot">X marks the spot:</div>
<button onclick="using_a_loop()">use a loop</button>
<button onclick="using_continuations()">use continuations</button>
</html>

如何强制Android互联网浏览器立即显示样式更改

1 个答案: