2

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

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

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

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

如何强制 Android 浏览器立即反映这种风格变化？是否有一些可用的脚本功能，或者一些<meta>可以解决这个问题的标签？请指教。

4

1 回答 1

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>
于 2012-10-13T05:22:15.257 回答