jQuery下實現等待指定元素載入完畢(可改成純js版)

先聲明下這個方法的使用場合，以免誤導大家。
比如在部落格園，我們沒法修改他的原始碼，
那麼只能想辦法監視元素的出現了。
所以下面方法是在修改不了源碼的情況下使用，而非寫自己的項目。

今天在改部落格幾個樣式的時候，以為很自然的加上js就可以實現了，
沒想到那個是ajax載入的資料，而非頁面首次載入的，
比如下面的 “提交評論” 按鈕，右側的 搜尋按鈕 等。
我很自然的寫了

複製代碼 代碼如下:
1 $("#btn_comment_submit").removeClass("comment_btn").addClass("btn"); //提交按鈕
2 $(".div_my_zzk").addClass("input-append"); //搜尋方塊
3 $(".btn_my_zzk").removeClass("btn_my_zzk").addClass("btn"); //搜尋按鈕


可是重新整理頁面後發現有點不對，看了 network 後發現是 ajax 過來的，
無奈，除了自己寫模版之外，只能自己想辦法修改代碼了。

那麼下面就是我想到的等待元素出現方法。
雖然是基於 jQuery 的，但是代碼很簡潔，可以修改成純js版的。

複製代碼 代碼如下:
jQuery.fn.wait = function (func, times, interval) {
var _times = times || -1, //100次
_interval = interval || 20, //20毫秒每次
_self = this,
_selector = this.selector, //選取器
_iIntervalID; //定時器id
if( this.length ){ //如果已經擷取到了，就直接執行函數
func && func.call(this);
} else {
_iIntervalID = setInterval(function() {
if(!_times) { //是0就退出
clearInterval(_iIntervalID);
}
_times <= 0 || _times--; //如果是正數就 --

_self = $(_selector); //再次選擇
if( _self.length ) { //判斷是否取到
func && func.call(_self);
clearInterval(_iIntervalID);
}
}, _interval);
}
return this;
}

使用方法當然也很簡單，只有3個參數。
func 是回呼函數，就是當指定元素出現後就執行的函數。
times 是檢測次數，預設是-1，一直檢測直到出現為止。
interval 是活動訊號間隔時間，預設 20 毫秒一次。

我們修改下之前的代碼
複製代碼 代碼如下:
$("#btn_comment_submit").wait(function() { //等待#btn_comment_submit元素的載入
this.removeClass("comment_btn").addClass("btn"); //提交按鈕
//這裡的 this 就是 $("#btn_comment_submit")
});

$("#widget_my_zzk").wait(function() { //等待#widget_my_zzk元素的載入
$(".div_my_zzk").addClass("input-append"); //搜尋方塊
$(".btn_my_zzk").removeClass("btn_my_zzk").addClass("btn"); //搜尋按鈕
});

是不是很簡單、、

當然，依然不破壞jQuery的鏈式結構，你依然可以 $("#id").wait(function(){}).hide();
但是後來想想，元素都沒載入，繼續鏈下去也沒意義，不過算了，不改了，就這樣吧。呵呵 :-)

最後說點，，我經驗尚淺，如果那裡寫的不對，還請各位大俠指點。