javascript - 如何重新启动代码？ (在动态更新的页面上)

Question

此代码选择数据 id 之间的最高数值并为其添加石灰背景。
该代码仅在首次加载页面时有效，但在加载页面时，data-id 正在更改，因此不会搜索新的 data-id。我添加了一个用于再次启动代码的函数，但它不起作用。

如何找到不断变化的数据 ID 并添加石灰背景？

我在 Tampermonkey 和 Greasemonkey 上使用它。

var i = 0, howManyTimes = 20;
function f() {
    maxData = $(".answers li[data-id]").get().reduce((maxObj, crrntNode) => {
        var node = $(crrntNode).data("id");
        var idVal = parseInt(node.substr(node.length - 4), 16);

        if (idVal > maxObj.value) {
            maxObj.value = idVal;
            maxObj.node = crrntNode;

        }
        return maxObj;
    },
        { value: 0, node: null }
    );
    // $("body").append (`<p>The highest data-id value was ${maxData.value}.</p>`)
    $(maxData.node).css("background", "lime").attr("id", "findvalue");

    $(document).ready(function () { //When document has loaded

        setTimeout(function () {
            // document.getElementById("findvalue").setAttribute("id", "oldvalue");
            $('li').css("background", "");
        }, 100); //Two seconds will elapse and Code will execute.
    });

    var x = Math.floor((Math.random() * 500) + 1);
    i++;
    if (i < howManyTimes) {
        setTimeout(f, x);
    }
}
f();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="question-text" class="question sp-element border-radius active">What is favorite colour?</div>
<ul class="answers" id="answers">
    <li data-id="58b9890062279282090ddc61" class="answer active">Purple</li>
    <li data-id="58b9890062279282090ddc85" class="answer active">Blue</li>
    <li data-id="58b9890062279282090ddc64" class="answer active">Yellow</li>
    <li data-id="58b9890062279282090ddc66" class="answer active">Red</li>
</ul>

Answer 1

您试图破解的页面/站点显然是通过 AJAX 更新的，这是最适合 waitForKeyElements() 的工作或 MutationObserver .
这不是 setTimeout() 的好用途. setInterval()无论如何，会更合适。

此外，您不需要 $(document).ready除非你的脚本设置为 @run-at document-start .

无论如何，下面是如何使用 MutationObserver 检测新的/更改的答案:

function highliteMaxAnswer () {
    var maxData     = $(".answers li[data-id]").get ().reduce ( (maxObj, crrntNode) => {
        //-- Don't trust page to update data. But we know attributes are changing.
        var nodeId  = $(crrntNode).attr ("data-id");
        var idVal   = parseInt (nodeId.slice (-4), 16);
        if (idVal > maxObj.value) {
            maxObj.value = idVal;
            maxObj.node = crrntNode;
        }
        return maxObj;
      },
        {value: 0, node: null}
    );
    $(".answers li[data-id]").css ("background", "");
    $(maxData.node).css ("background", "lime");
}
highliteMaxAnswer ();

var answerObsrvr    = new MutationObserver (answerChangeHandler);
var obsConfig       = {
    childList: true, attributes: true, subtree: true, attributeFilter: ['data-id']
};
answerObsrvr.observe (document.body, obsConfig);  //  Use container versus body, if possible.

function answerChangeHandler (mutationRecords) {
    var answersChanged  = false;

    mutationRecords.forEach (muttn => {
        if (muttn.type === "attributes")
            answersChanged = true;
        else if (muttn.type === "childList"  &&  muttn.addedNodes  &&  muttn.addedNodes.length) {
            for (let nwNode of muttn.addedNodes) {
                if (nwNode.attributes  &&  nwNode.attributes["data-id"]) {
                    answersChanged = true;
                    break;
                }
            }
        }
    } );
    if (answersChanged)  highliteMaxAnswer ();
}

/*---------------------------------------------------------------------
All code, below, is just to simulate the changing page.
Do not include it in your script.
*/
$("button").click ( function () {
    this.qCnt = this.qCnt || 1;
    this.qCnt++;
    $("#question-text").text (`What is your favorite color ${this.qCnt}?`);

    $(".answer").each ( function () {
        var newDataId = "58b9890062279282090d" + getRandomHexWord ();
        //-- Use attr() versus data() to simulate what website does.
        $(this).attr ("data-id", newDataId);
    } );
} );
function getRandomHexWord () {
    return ('0000' + parseInt (65536 * Math.random() ).toString (16) ).slice (-4);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="question-text" class="question">What is your favorite color?</div>
<ul class="answers" id="answers">
    <li data-id="58b9890062279282090ddc61" class="answer">Purple</li>
    <li data-id="58b9890062279282090ddc85" class="answer">Blue</li>
    <li data-id="58b9890062279282090ddc64" class="answer">Yellow</li>
    <li data-id="58b9890062279282090ddc66" class="answer">Red</li>
</ul>
<button>Simulate New Question</button>