再次单击时，javascript自动循环不重置

Question

I made a little script for Tampermonkey, to help me browse tumblr notes without any unnecessary clicking or looking at "user liked this" spam.

$('.more_notes_link').click(function() {
    var LoopCount = 10;
    var i = 0;
    clearInterval(loadNotesInterval);
    var loadNotesInterval = setInterval(function() {
        if ($('.more_notes_link').length ) {
            $('.more_notes_link').click();
            i++;
            console.log(i);
            if (i >= LoopCount) {
                clearInterval(loadNotesInterval);
            }
        }
        else
        {
            clearInterval(loadNotesInterval);
        }
    }, 1000)
});

GM_addStyle ( ".notes .note.without_commentary{display:none} .notes .note.reply{display:inline}" );

For some reason though, it just works perfectly when run once, logging numbers from 1 to 10, and then stopping... And then it doesn't work anymore. No console output, no looping, and it only clicks once.

I've tried and given up several times on this, so I thought I'd finally just ask here if someone could fix my problem. I can't figure it out myself.

EDIT: I tried putting some console.logs all over the place, and it seems that the script doesn't detect my click at all after the first one. So for some reason, even though .more_notes_link still exists, it just doesn't notice me clicking it at all.

Answer 1

because loadNotesInterval is a local variable so each click you get a new one.

So if you define it outside of the click and drop the var it will work the way you want.

(function () {
    var loadNotesInterval;
    $('.more_notes_link').click(function() {
        var LoopCount = 10;
        var i = 0;
        clearInterval(loadNotesInterval);
        loadNotesInterval = setInterval(function() {
            if ($('.more_notes_link').length ) {
                $('.more_notes_link').click();
                i++;
                console.log(i);
                if (i >= LoopCount) {
                    clearInterval(loadNotesInterval);
                }
            }
            else
            {
                clearInterval(loadNotesInterval);
            }
        }, 1000)
    });    
}());

Answer 2

My guess is that the link itself is being regenerated, which means it could be missing when you check for its length.

Maybe try using on instead of click method. That way you can specify the entire document and use your selector to filter the descendants.

$('document').on('click', '.more_notes_link', function() {
  // your code
}

Answer 3

I solved the problem at last!

$('body').on('click', '.more_notes_link',function() {
    if (i == 0) {
        clearInterval(loadNotesInterval);
        var loadNotesInterval = setInterval(function() {
            if ($('.more_notes_link').length) {
                i++;
                $('.more_notes_link').click();
                if (i >= LoopCount) {
                    i = 0;
                    clearInterval(loadNotesInterval);
                }
            }
            else
            {
                i = 0;
                clearInterval(loadNotesInterval);
            }
        }, 1000)
    }
});

Firstly, it lost the item with the correct class after it was clicked once, so I had to search it as a child of the body.

Then the problem was that it clicked itself and started hundreds of loops at the same time. I solved this by only allowing it to loop on click when the loop isn't running already.

I hope this helps someone else fix the same problem, because this one was pretty tough to solve.

If anyone wants to use it, it's posted in HERE!