jQuery下实现等待指定元素加载完毕

在tempermonkey中,需要监控页面是否加载完成。
但是,页面中的一些元素是ajax请求的。
所以需要通过判断元素是否加载成功。

jQuery.fn.wait = function (selector, func, times, interval) {
    var _times = times || -1, //100次
    _interval = interval || 20, //20毫秒每次 
    _self = this,
    _selector = 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;
}

$(".otc-trade-list").wait(".otc-trade-list", function() {
    console.log("class otc-trade-list 加载成功");
});

本代码是基于https://www.cnblogs.com/52cik/p/jquery-wait.html进行修改的。因为他的代码中,this.selector用法已经在jquery3.0中去除了。

另外,我又基于Promise写了一个等待元素加载成功或取消的函数。


    // 函数:等待元素加载成功或消失
    // 示例1: waitElement(".ivu-notice-desc", 6, 1000).then(function(){
    //     console.log("succ");
    // }).catch(function(){
    //     console.log("fail")
    // });
    // 示例2: waitElement(".ivu-notice-desc").then(
    //     function(){console.log("succ");
    //     return waitElement(".ivu-notice-desc", null, null, false)
    // }).then(function(){
    //     console.log("clear")
    // })
    function waitElement(selector, times, interval, flag=true){
        var _times = times || -1, // 默认不限次数
            _interval = interval || 500, // 默认每次间隔500毫秒
            _selector = selector, //选择器
            _iIntervalID,
            _flag = flag; //定时器id
        return new Promise(function(resolve, reject){
            _iIntervalID = setInterval(function() {
                if(!_times) { //是0就退出
                    clearInterval(_iIntervalID);
                    reject();
                }
                _times <= 0 || _times--; //如果是正数就 --
                var _self = $(_selector); //再次选择
                if( (_flag && _self.length) || (!_flag && !_self.length) ) { //判断是否取到
                    clearInterval(_iIntervalID);
                    resolve(_iIntervalID);
                }
            }, _interval);
        });
    }

    // 异步等待n秒
    // 调用方法: return wait_time(2000).then(() => console.log("123123"));
    const wait_time = ms => new Promise(resolve => setTimeout(resolve, ms));

你可能感兴趣的:(javascript,jquery,javascript,ajax,promise,等待元素加载)