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

一个油猴子脚本,通过查找页面也符合条件的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.8k
2 个回答
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 + ']';
            }
        });
    }
});

解决了,放在一个函数里面,每个节点调用一次函数,修改对应的节点

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题