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版的。

 1 jQuery.fn.wait = function (func, times, interval) {
 2     var _times = times || -1, //100次
 3     _interval = interval || 20, //20毫秒每次 
 4     _self = this,
 5     _selector = this.selector, //选择器
 6     _iIntervalID; //定时器id
 7     if( this.length ){ //如果已经获取到了，就直接执行函数
 8         func && func.call(this);
 9     } else {
10         _iIntervalID = setInterval(function() {
11             if(!_times) { //是0就退出
12                 clearInterval(_iIntervalID);
13             }
14             _times <= 0 || _times--; //如果是正数就 --
15             
16             _self = $(_selector); //再次选择
17             if( _self.length ) { //判断是否取到
18                 func && func.call(_self);
19                 clearInterval(_iIntervalID);
20             }
21         }, _interval);
22     }
23     return this;
24 }

使用方法当然也很简单，只有3个参数。
func 是回调函数，就是当指定元素出现后就执行的函数。
times 是检测次数，默认是-1，一直检测直到出现为止。
interval 是检测间隔，默认 20 毫秒一次。

我们修改下之前的代码

1 $("#btn_comment_submit").wait(function() { //等待#btn_comment_submit元素的加载
2     this.removeClass("comment_btn").addClass("btn"); //提交按钮
3     //这里的 this 就是 $("#btn_comment_submit")
4 });
5 
6 $("#widget_my_zzk").wait(function() { //等待#widget_my_zzk元素的加载
7     $(".div_my_zzk").addClass("input-append"); //搜索框
8     $(".btn_my_zzk").removeClass("btn_my_zzk").addClass("btn"); //搜索按钮
9 });

是不是很简单、、

当然，依然不破坏jQuery的链式结构，你依然可以 $("#id").wait(function(){}).hide();
但是后来想想，元素都没加载，继续链下去也没意义，不过算了，不改了，就这样吧。呵呵 :-)

最后说点，，我经验尚浅，如果那里写的不对，还请各位大侠指点。

<script type="text/javascript"> </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>