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;
} 

参数说明与使用示例

使用方法同样简单，仅需三个参数。

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();

不过后来想到，如果元素尚未加载，继续链式操作并无意义，但暂且不改，就这样吧。呵呵 :-)

最后补充，本人经验尚浅，如有不当之处，敬请各位指正。