如何让页面内符合条件的多个Dom节点同时执行httprequest分别接受2秒后返回的值?

作者站长头像
站长
· 阅读数 10

一个油猴子脚本,通过查找页面也符合条件的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))
            }
        });
回复
1个回答
avatar
test
2024-07-01
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 + ']';
            }
        });
    }
});
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容