0

我已经设置了多个堆叠在一起的图像（image1 = 普通图标，image2 = 突出显示的图标）。

我的目标是突出显示图标，进行处理，然后将图标恢复正常。另外，要尽快处理。瓶颈是让“亮点”出现的变通方法。

为此，我只是切换 .style.visibility = {"hidden", "visible"}

我看到的行为是只显示最新的样式，并且在函数退出之前它不会更新。从我对 SO 的研究中，我发现了以下内容：

  • 关闭和打开 .style.visibility 或 .style.display 以强制重绘
    • 没有看到正确的行为。仅显示最新更新
  • 使用 setTimeout( callback , 0) 或 setInterval( callback , 0)
    • 表现如预期。但是，由于浏览器强制执行“最短等待时间”，代码的执行速度没有我需要的那么快。
    • setInterval() 函数实现要求调用该函数两次以执行一项操作（一次突出显示，第二次处理然后取消突出显示）
    • 如有必要，我可以上传代码

我附上了一个快速示例代码来演示只显示最后一个样式

<!doctype html>
<head>
<title>test redraw</title>
</head>
<body>
    <img id="logo"
        src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
    9TXL0Y4OHwAAAABJRU5ErkJggg=="
        alt="Red dot from wikipedia" /></img>


    <script>
        function pausecomp(ms) {
            ms += new Date().getTime();
            while (new Date() < ms) {
            }
        }
        function hide_then_show() {
            var id = document.getElementById("logo");
            pausecomp(1000);
            id.style.display = "none";
            id.parentNode.style.display = "none";
            id.parentNode.style.display = "block";
            pausecomp(1000);
            id.style.display = "block";
            id.parentNode.style.display = "none";
            id.parentNode.style.display = "block";
        }

        window.addEventListener("click", hide_then_show());
    </script>
</body>
</html>

任何建议，将不胜感激。我不知道我是否是最好的方法

4

1 回答 1

1

我怀疑你没有setTimeout()正确使用。以下是如何使这项工作。

function hide_then_show() {
    var id = document.getElementById("logo");
    setTimeout(function () {
        id.parentNode.style.display = "none";
        setTimeout(function () {
            id.parentNode.style.display = "block";
        }, 1000); // Hiding time
    }, 1000); // Delay between click and hide
}
window.addEventListener("click", hide_then_show, false);

jsFiddle的工作演示。您可以玩小提琴并调整延迟，您会看到切换图像显示的速度有多快。

如果你需要一个闪光灯，你可以检查这个fiddle。

于 2013-03-12T05:39:35.750 回答