javascript遞歸函數問題求大神看看

Question

大神晚上好，請幫我看看我的函數為什麼不能執行？
情況說明：由於p中的table是透過ajax載入過來的，函數的目的是判斷有沒有這table,如果有則讓其背景變紅，沒有的話，就1秒後再執行以下這個函數，但現在當table已經載入顯示後，find()函數並沒有讓table變紅（報錯：Uncaught RangeError: Maximum call stack size exceeded）
先謝謝大神們了！

Answer 1

因為你用p.getElementsByTagName('table')[0]這個取到的是一個DOM對象，由於DOM對象沒有.length屬性，所以target.length其實是未定義的。而undefined > 0的值一直是false，所以你會無限次地呼叫else分支，所以也會增加無數次的find(p)綁定。所以瀏覽器提示find呼叫次數超出最大限制。

正確的做法是讓target為p.getElementsByTagName("table")，這才是數組，才有.length的值。

Update

程式碼：
方案1：（判斷取到所有table的陣列長度，並取第一個運算）

function find(p) {
    var target = p.getElementsByTagName("table");
    if (target.length > 0) {
        target[0].style.background = 'red';
    } else {
        setTimeout(function() {
            find(p);
        }, 1000)
    }
};

方案2：（直接判斷table，並直接操作取到的table）

function find(p) {
    var target = p.getElementsByTagName("table")[0];
    if (target) {
        target.style.background = 'red';
    } else {
        setTimeout(function() {
            find(p);
        }, 1000)
    }
};

Answer 2

target.length target 是 table, table.length 是什麼？

參考一下

function find(p) {
  var interval = setInterval(function () {
    var target = p.getElementsByTagName("table")[0]
    if (target) {
      clearInterval(interval)
      target.style.background = 'red'
    }
  }, 1000)
}