javascript - 猴油脚本编写问题 代码运行时灵时不灵的 求助大佬 什么问题导致的 怎么修改？

Question

某音小店的一个打款页面，当点击搜索后 DOM 会发生改变
正常是这样的

元素界面

当存在打款记录的时候

元素界面

我的猴油脚本代码如下

// 异步延迟函数function delay(ms) {    return new Promise(resolve => setTimeout(resolve, ms));}// 修改元素样式function modifyElement(element) {    element.style.paddingLeft = '10px';    element.style.color = '#FF7F00';    element.className = 'styles_title__1X-Qt';}// 监视节点和属性变化function startObserving(element, callback) {    const config = {attributes: true, childList: true, subtree: true};    const observer = new MutationObserver((mutationsList) => {        for (const mutation of mutationsList) {            if (mutation.type === 'childList') {                callback(mutation);            } else if (mutation.type === 'attributes') {                callback(mutation);            }        }    });    observer.observe(element, config);    return () => {        observer.disconnect();    };}function main() {    const parent = document.getElementById('orderAppContainer');    const search = parent.querySelector('button.ant-btn.ant-btn-primary');    // 在点击事件中增加一层异步处理，避免因为DOM未完全加载而导致的找不到元素的问题    search.addEventListener('click', async function () {        await delay(1000);        const input = parent.querySelector('#shop_order_no');        const value = input.getAttribute('value');        const regex = /[0-9]{19}/g;        const match = regex.exec(value);        if (match) {            // 打款记录            const record = startObserving(parent, (mutation) => {                const target = mutation.target;                if (target.matches('span.styles_prompt__1kJY-')) {                    modifyElement(target);                } else {                    const element = target.querySelector('span.styles_prompt__1kJY-');                    if (element) {                        modifyElement(element);                    }                }            });        }    });}    window.onload = function () {        main();    };

我想要的效果

遇到的问题是 第一次去搜索的时候 脚本没有正常运行 就是没有修改元素 但是第二次去搜索的时候 就正常的 为什么啊 怎么修改才能保证每次都正常运行 谢谢大佬

如题

Answer 1

这个问题可能是由于DOM元素在点击搜索后还未完全加载就运行了脚本，导致脚本找不到需要修改的元素。异步延迟函数（delay）可以解决这个问题，等待一段时间让DOM元素完全加载。

然而，你的代码中已经使用了异步延迟函数（delay），但是问题仍然存在。这可能是因为你的代码在等待DOM元素加载后，又进行了其他的操作，导致修改元素的代码没有运行。

你可以尝试将修改元素的代码放入回调函数中，确保只有在DOM元素完全加载后才运行修改元素的代码。另外，你也可以尝试使用节流函数（throttle）来限制修改元素的频率，避免因为频繁修改元素而导致的页面卡顿。

以下是修改后的代码：

// 异步延迟函数function delay(ms) {    return new Promise(resolve => setTimeout(resolve, ms));}// 修改元素样式function modifyElement(element) {    element.style.paddingLeft = '10px';    element.style.color = '#FF7F00';    element.className = 'styles_title__1X-Qt';}// 监视节点和属性变化function startObserving(element, callback) {    const config = {attributes: true, childList: true, subtree: true};    const observer = new MutationObserver((mutationsList) => {        for (const mutation of mutationsList) {            if (mutation.type === 'childList') {                callback(mutation);            } else if (mutation.type === 'attributes') {                callback(mutation);            }        }    });    observer.observe(element, config);    return () => {        observer.disconnect();    };}function main() {    const parent = document.getElementById('orderAppContainer');    const search = parent.querySelector('button.ant-btn.ant-btn-primary');    // 在点击事件中增加一层异步处理，避免因为DOM未完全加载而导致的找不到元素的问题    search.addEventListener('click', async function () {        await delay(1000);        const input = parent.querySelector('#shop_order_no');        const value = input.getAttribute('value');        const regex = /[0-9]{19}/g;        const match = regex.exec(value);        if (match) {            // 打款记录            const record = startObserving(parent, (mutation) => {                const target = mutation.target;                if (target.matches('span.styles_prompt__1kJY-')) {                    modifyElement(target);                } else {                    const element = target.querySelector('span.styles_prompt__1kJY-');                    if (element) {                        modifyElement(element);                    }                }            });        }    });}window.onload = function () {    main();};