jQuery下实现等待指定元素加载完毕,可改成纯js版

http://www.poluoluo.com/jzxy/201307/233374.html

代码如下:

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

但是后来想想,元素都没加载,继续链下去也没意义,不过算了,不改了,就这样吧。呵呵 :-)