0

次のHTMLコードがあります。画面が「カバー」DIV で覆われている間に、ボタンと他の場所をクリックします。ボタンをクリックしても発火しません。後で「カバー」DIVが非表示になると、ボタンのクリックが発生します。

タイミングの問題があるようです。誰かがこの動作を説明できますか?

マークアップ:

<div id="cover"></div>
<button onclick="alert('Button clicked')">Click me</button>
<div id="text"></div>​

CSS:

#cover {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background-color: white;
    opacity: 0.8
}​

Javascript:

function hide ()
{
    document.getElementById ("cover").style.display = "none";
}
function show ()
{
    document.getElementById ("cover").style.display = "block";
}
function busy (callback)
{
    show ();
    setTimeout (callback, 1);
}
function work ()
{
    var start = (new Date ()).getTime ();
    var wait  = 3000;
    while ((new Date()).getTime () - start < wait)
    {
        /* do nothing */
    }
    hide ();
}
function start ()
{
    document.getElementById ("cover").onclick = function (ev) {
        document.getElementById ("text").innerHTML = 'Cover clicked';
    };
    busy (work);
}​

http://jsfiddle.net/userdude/5DutW/4

4

3 に答える 3

4

あなたのwork関数は機能しません (しゃれは意図されていません): UI が 3 秒間フリーズするため、説明したようにクリックやその他の操作がキューに入れられます。の代わりにに渡し3000てみませんか？setTimeout1

function busy (callback)
{
    show ();
    setTimeout (callback, 3000);
}
function work ()
{
    hide ();
}
于 2012-12-27T20:28:42.577 に答える
0

いくつかのテストの後、私はこの振る舞いを確認することができます。FirefoxとChromeには大きな違いがあります。

多くの人が言っているように、Javascriptプログラムはシングルスレッドであることに注意してください。

Firefoxでは、関数'work'がAjax呼び出しを実行している場合、クリックは無視されます。関数が戻って「カバー」が消えても、何も起こりません。

Chromeでは、クリックがキャッチされてキューに入れられます。関数'work'が戻ると、onclickイベントが発生します。「カバー」が消えたため、onclickイベントは発生しません。一方、ボタンはonclickイベントを受け取ります。たとえば、ボタンを2回クリックすると（カバーされたとき）、後で2つのアラートが表示されます。

Chromeの動作がわかりにくく、私見が間違っていることがわかりました。目をクリックしたときに、ボタンが覆われているためクリックできない（クリックされたボタンとして表示されない）と自然に通知されるためです。

すべての答えと手がかりをありがとう。ほんとうにありがとう。

于 2012-12-28T06:44:10.533 に答える
0

これは、ページ スレッドをロックしているために発生します。

while ((new Date()).getTime () - start < wait)
{
    /* do nothing */
}

これにより、イベントが終了するまでイベントが処理されなくなり、UI が更新されなくなります。

代わりにタイムアウトを使用しないのはなぜですか?setTimeout(hide,wait);

于 2012-12-27T20:32:11.567 に答える