[AJAX] 微妙的時間差

(引用 https://blog.ericsk.org/archives/800)

Nice IE！Nice Firefox！

Nice IE

最近在寫一些會用到 AJAX 的網頁，目前使用的 JavaScript framework 是 jQuery，於是乎，會有類似這樣（方便舉例而寫）的 code：

<a href="#" onclick="$('#content').load('/url/for/XXX');">Load XXX</a>
<div id="content"></div>
<p>
  而 <code>/url/for/XXX</code> 這個頁面有引入一個 <code>XXX.js</code> 檔案，為了在 <code>/usr/for/XXX</code> 全部讀進 <code>div#content</code> 後作一些 event handling 的 initialization，所以我在 <code>XXX.js</code> 裡有這麼一段：
</p>

<p class="hl-surround">
  <p class="hl-main">
    <pre><span class="hl-reserved">function </span><span class="hl-identifier">XXX_init</span><span class="hl-brackets">(</span><span class="hl-identifier">e</span><span class="hl-brackets">) {

// 作一些 initializations.. }

$(’#content’).ready(XXX_init);

    <p>
      由於我一直是開著 Firefox/Navigator + firebug 在寫網頁，這樣的寫法一直可以成功運作，直到我拿出 IE 之後，發現 <code>XXX_init</code> 雖然被呼叫了，但是在 <code>/url/for/XXX</code> 裡的物件都<strong>沒有被處理過…</strong>，這時我就猜想，是不是 <code>ready</code> 被 trigger 的時間在 IE/Firefox 是不同的..
    </p>
    
    <p>
      所以我就把處理 <code>div#content</code> ready 的部份改寫成：
    </p>
    
    <p class="hl-surround">
      <p class="hl-main">
        <pre><span class="hl-default">$</span><span class="hl-brackets">(</span><span class="hl-quotes">'</span><span class="hl-string">#content</span><span class="hl-quotes">'</span><span class="hl-brackets">)</span><span class="hl-default">.</span><span class="hl-identifier">ready</span><span class="hl-brackets">(</span><span class="hl-reserved">function</span><span class="hl-brackets">(</span><span class="hl-identifier">e</span><span class="hl-brackets">){

setTimeout(XXX_init, 100); });

        <p>
          這樣一改果然就 OK 了，這真是很微妙的時間差啊….本來很想說：「Nice IE！」的，不過我又發現另一件事，不能厚此薄彼，所以我又說了：「Nice Firefox！」
        </p>
        
        <h4>
          Nice Firefox
        </h4>
        
        <p>
          這個狀況是發生在我使用了 <code>window.open</code> 的禁斷技 XD，簡單地說我開了一個 popup window 作了一些事，作完之後會使用 AJAX 在原來頁面中 load 一些東西。以下是 popup window 的情境（為了說明而寫） code ：
        </p>
        
        <p class="hl-surround" style="height: 28px">
          <p class="hl-main">
            <pre><span class="hl-brackets">&lt;</span><span class="hl-reserved">input </span><span class="hl-var">type</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">button</span><span class="hl-quotes">" </span><span class="hl-var">value</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">結束</span><span class="hl-quotes">" </span><span class="hl-var">onclick</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">window.opener.doLoad();window.close();</span><span class="hl-quotes">" </span><span class="hl-brackets">/&gt;</span></pre>
            
            <p>
              這是叫原視窗去執行原視窗中的 <code>doLoad</code> 然後再把自己關掉，<code>doLoad</code> 也是利用 AJAX 去 load 一些東西到我某個 div 裡，這回就有趣了：<strong>在 IE 裡正常，在 Firefox 會看到 firebug 抱怨 AJAX fail…</strong>。所以我再度祭出 <code>setTimeout</code> 來用，果然又是個沒問題了…
            </p>
            
            <p>
              微妙..*推眼鏡*
            </p>
            
            <div class="wp_plus_one_button" style="margin: 0 8px 8px 0; float:left; ">
              <g:plusone href="https://blog.sd.idv.tw/archives/36" callback="wp_plus_one_handler"></g:plusone>
            </div>