網站首頁 編程語言 正文
在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
相關推薦
- 2022-12-24 ReactNative支付密碼輸入框實現詳解_React
- 2023-09-17 el-table嵌入輸入框下拉框按鈕等等
- 2022-06-16 C#使用符號表實現查找算法_C#教程
- 2023-01-20 python使用paramiko執行服務器腳本并拿到實時結果_python
- 2023-12-10 記錄一次導出Excel報表的錯誤
- 2023-04-12 Python?issubclass和isinstance函數的具體使用_python
- 2022-10-06 Redis中鍵和數據庫通用指令詳解_Redis
- 2022-12-11 Redis?Cluster原理及配置詳解_Redis
- 最近更新
-
- window11 系統安裝 yarn
- 超詳細win安裝深度學習環境2025年最新版(
- Linux 中運行的top命令 怎么退出?
- MySQL 中decimal 的用法? 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎操作-- 運算符,流程控制 Flo
- 1. Int 和Integer 的區別,Jav
- spring @retryable不生效的一種
- Spring Security之認證信息的處理
- Spring Security之認證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權
- redisson分布式鎖中waittime的設
- maven:解決release錯誤:Artif
- restTemplate使用總結
- Spring Security之安全異常處理
- MybatisPlus優雅實現加密?
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務發現-Nac
- Spring Security之基于HttpR
- Redis 底層數據結構-簡單動態字符串(SD
- arthas操作spring被代理目標對象命令
- Spring中的單例模式應用詳解
- 聊聊消息隊列,發送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠程分支