0

複数の画像を積み重ねた設定があります（image1 =通常のアイコン、image2 =強調表示されたアイコン）。

私の目的は、アイコンを強調表示し、処理を行ってから、アイコンを通常に戻すことです。また、可能な限り高速に処理します。ボトルネックは、「ハイライト」を表示するための回避策です。

これを実現するために、.style.visibility = {"hidden"、"visible"}を切り替えるだけです。

私が見ている動作は、最新のスタイルのみが表示され、関数が終了するまで更新されないというものです。SOに関する私の調査から、次のことがわかりました。

  • .style.visibilityまたは.style.displayのオンとオフを切り替えて、再描画を強制します
    • 正しい動作が見られませんでした。表示されている最新のアップデートのみ
  • setTimeout（callback、0）またはsetInterval（callback、0） を使用します
    • 期待どおりに動作します。ただし、ブラウザが「最小待機時間」を強制しているため、コードは必要な速度で実行されていません。
    • setInterval（）関数の実装では、1つの操作を実行するために関数を2回呼び出す必要があります（1回は強調表示し、2回目は処理してから、強調表示を解除します）。
    • 必要に応じてコードをアップロードできます

最後のスタイルのみが表示されることを示すために、簡単なサンプルコードを添付しました

<!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で動作するデモ。フィドルで遊んだり、遅延を調整したりできます。画像の表示をどれだけ速く切り替えることができるかがわかります。

ブリンカーが必要な場合は、このフィドルを確認できます。

于 2013-03-12T05:39:35.750 に答える