一个油猴子脚本,通过查找页面也符合条件的a标签,对标签元素文本执行httpRequest,2秒左右返回值,然后将返回的值修改a标签文本
<a>第一个元素</a> <a>第二个元素</a> <a>第三个元素</a> <a>第四个元素</a>
请求后,修改为
<a>第一个元素[t]</a> <a>第二个元素[t]</a> <a>第三个元素[t]</a> <a>第四个元素[t]</a>
从页面取符合条件a标签内容,httpRequest请求后,返回t的值
定义全局t变量后,还未获取到前一个a标签内容请求返回的值并修改节点内容,第二个a标签节点的内容就开始执行httpRequest请求,t的值被修改,无法分别对节点同时请求,修改原节点内容
使用2个setTimeout,依次对每个a标签节点内容进行httpRequest请求并修改页面元素,等待时间太长,能否同时执行请求,分别修改对应的a标签元素内容添加返回的值?
let Result = ''; var t = '';
function getInfo(url) { GM_xmlhttpRequest({ method: 'GET', url: url, onload: function (res) { Result = res.status; let domNewx = new DOMParser().parseFromString(res.responseText, 'text/html'); let info = domNewx.querySelectorAll('.info')[0]; if(info) { if(info.children[1].querySelector('.size')) t = info.children[1].querySelector('.size').innerHTML.split(' ')[5]; } else { //console.log('undefined'); Result = 404; } }, onerror: function (result) { console.log(result); }, }); }
document.querySelectorAll('a').forEach(function (value, index) { if(value.nextSibling.className == 'symbol') { setTimeout(() => { getInfo(url + value.innerHTML); setTimeout(() => { if(t) { value.innerHTML = value.innerHTML + '[' + t + ']'; } //console.log(t); t = ''; //}, 2000*(index - 99 + 1)) }, 2000) }, 2500*(index + 1)) } });
function getInfo(url) { return new Promise((resolve, reject) => { GM_xmlhttpRequest({ method: 'GET', url: url, onload: function (res) { let domNewx = new DOMParser().parseFromString(res.responseText, 'text/html'); let info = domNewx.querySelectorAll('.info')[0]; let t = ''; if(info && info.children[1].querySelector('.size')) { t = info.children[1].querySelector('.size').innerHTML.split(' ')[5]; } resolve(t); }, onerror: function (result) { reject(result); }, }); }); }
然后:
document.querySelectorAll('a').forEach(function (value, index) { if(value.nextSibling.className == 'symbol') { getInfo(url + value.innerHTML).then(t => { if(t) { value.innerHTML = value.innerHTML + '[' + t + ']'; } }); } });