Tampermonkey复选框停止重新加载页面后工作

Question

我用这Tampermonkey代码来创建该复选框，选中时，会点击几个按钮周期性以及刷新页面。 该代码做正确的事，问题是，更新页面后，将取消选中的复选框，然后停止。

我设法让保持与代码的最后一部分检查的复选框，问题是，更新页面后，不会继续函数即使选中复选框，并从我与试验中观察我不得不取消选中该复选框，并再次检查工作。

我相信这个问题是与代码的开始，但到处搜寻后，我不能修复这个问题。从我看到它，只有当它被点击复选框，而不是如果是自动检查响应。

function addDomElements () {
    var newNodes = $( `
      <div class="mySpamCntrols foundation-radius fightContainer foundation-base-font">
        <input type="checkbox" class="smallerBox" id="EsquerdaHitBox" data-trgtSelctr="#fightButtonBerserk1">
        <label class="checkboxlabel" for="EsquerdaHitBox">Hit Esquerda</label>
        <input type="checkbox" class="smallerBox" id="MeioHitBox" data-trgtSelctr="#fightButtonBerserk1">
        <label class="checkboxlabel" for="MeioHitBox">Hit Meio</label>
        <input type="checkbox" class="smallerBox" id="DireitaHitkBox" data-trgtSelctr="#fightButtonBerserk2">
        <label class="checkboxlabel" for="DireitaHitkBox">Hit Direita</label>
      </div>
    ` );
    //-- Best to add a <style> node, but spam inline styles for now...
    newNodes.find ("input").attr ("style", "margin:1px !important;line-height:10px !important;");
    newNodes.find ("label").attr ("style", "margin-right: 20px;");

    newNodes.insertAfter($('.foundation-radius.fightContainer.foundation-base-font')[1] );

    //-- Activate checkboxes
    $(".mySpamCntrols").on ("change", "input[data-trgtSelctr]", processMyCheckBoxes);
}
addDomElements ();

function processMyCheckBoxes (zEvent) {
    var chkBox = zEvent.target;
    //-- If box is now checked, fire off an immediate click and start the timers
    if (chkBox.checked) {
        clickButtonByjQuerySelector (chkBox.dataset.trgtselctr);
        //chkBox.spamClckTmr   = setInterval (clickButtonByjQuerySelector, 30000, chkBox.dataset.trgtselctr);
        chkBox.spamClckTmr   = setInterval (clickButtonByjQuerySelector, 2222, chkBox.dataset.trgtselctr);
        chkBox.pageReloadTmr = setTimeout  (location.reload.bind (window.location), 300000);
    }
    //-- Else, if box is now not checked, cancel the timers
    else {
        clearInterval (chkBox.spamClckTmr);
        clearTimeout  (chkBox.pageReloadTmr);
    }
}

function clickButtonByjQuerySelector (jQuerySelector) {
    var targetNode = $(jQuerySelector)[0];
    if (targetNode) {
        console.log ("Clicking node: ", jQuerySelector);
        //-- Warning this my not always suffice.  See https://stackoverflow.com/q/15048223
        targetNode.click ();
    }
    else {
        console.warn (`Node [${jQuerySelector}] not found!`);
    }
}

//Save Checkbox
$(function(){
    $('input:checkbox').each(function() {
        var $el = $(this);
        $el.prop('checked', sessionStorage[$el.prop('id')] === 'true');
    });

    $('input:checkbox').on('change', function() {
        var $el = $(this);
        sessionStorage[$el.prop('id')] = $el.is(':checked');
    });
});

如何获得重新加载页面后选择复选框计时器重新启动吗？

Answer 1

你接近，但它不足以设置checked属性。你也必须同步跟进事件处理程序（一个或多个）。

一个简单的方法来，这只是让代码点击复选框。

此外，还有针对$(function(){包装无须/使用。

此代码的工作：

//-- Restore and Save Checkboxes from sessionStorage:
$('input:checkbox').each (function () {
    var $el     = $(this);
    var elId    = $el.prop ('id');
    if (sessionStorage[elId] === 'true') {
        document.getElementById (elId).click ();
    }
} );

$('input:checkbox').on ('change', function () {
    var $el = $(this);
    sessionStorage[$el.prop ('id')] = $el.is (':checked');
} );