日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后,達者為師

網站首頁 編程語言 正文

jQuery下實現等待指定元素加載完畢

作者:win_turn 更新時間: 2022-04-19 編程語言

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

原文鏈接:https://blog.csdn.net/win_turn/article/details/106745664

欄目分類
最近更新