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

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

今天在改博客幾個樣式的時候，以為很自然的加上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版的。

複製程式碼

程式碼如下:

<. 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
_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();
但是後來想想，元素都沒加載，繼續鏈下去也沒意義，不過算了，不改了，就這樣吧。呵呵 :-) 最後說點，我經驗尚淺，如果那裡寫的不對，還請各位大俠指點。