My Greasemonkey script starts a sequence of images loading. How do I stop it when desired?

Question

I use ImgLikeOpera and Squid Caching Proxy to manage my bandwidth while on dialup. But, I can't set it to load one image at a time, so I had the bright idea to write a script that will open each image on a page one at a time in a new tab and then close them so that they'll be saved in my cache.

Script works great, added a start button so that I could control when it started... but can't figure out how to make a stop button that will interrupt the process. I tried a bunch of stuff and nothing works...

It seems like when it's in the loop it can't hear what's going on outside the loop...

I have a feeling that there is a very simple way to do this, but I'm getting frustrated. Isn't this what break or return is supposed to be for?

Here's the relevant parts of my script:

var box = document.createElement ('div');
box.id = 'mySelectBox';
document.body.appendChild (box);

box.innerHTML = 'click>';

var searchButton = document.createElement ('div');
searchButton.className = 'mySearchButton';
searchButton.textContent = 'Search and open';

box.insertBefore (searchButton, box.nextSibling);

var stopButton = document.createElement ('div');
stopButton.className = 'myStopButton';
stopButton.textContent = 'Stop';

box.insertBefore (stopButton, box.nextSibling);

var mytable = document.getElementById ('lair-sort-pets').getElementsByTagName ('img');
var linksToOpen = [];
var mywin2 = null;

function openpics () {

    for (var J = 0, L = mytable.length; J < L; J++) {

        linksToOpen.push (mytable[J].src); //-- Add URL to list
    }

    openLinksInSequence ();
};

function openLinksInSequence () {

    if (mywin2) {
        mywin2.close ();
        mywin2 = null;
    }

    if (linksToOpen.length) {

        var link = linksToOpen.shift ();
        mywin2 = window.open (link, "my_win2");

        mywin2.addEventListener ('load', openLinksInSequence, false);

    }
}

searchButton.addEventListener ('click', openpics, true);
//stopButton.addEventListener ('click', , true);

How do I make the stop button actually stop any more links from loading?

Answer 1

Use a global state variable. Like so:

var okayToOpenLinks = true;

searchButton.addEventListener ('click', openpics);
stopButton.addEventListener ('click', stopLinkSequence);

function openpics () {
    okayToOpenLinks = true;

    if (linksToOpen.length === 0) {
        for (var J = 0, L = mytable.length; J < L; J++) {

            linksToOpen.push (mytable[J].src); //-- Add URL to list
        }
    }

    openLinksInSequence ();
};

function stopLinkSequence () {
    okayToOpenLinks = false;
}

function openLinksInSequence () {
    if (mywin2) {
        mywin2.close ();
        mywin2 = null;
    }

    if (okayToOpenLinks  &&  linksToOpen.length) {
        var link = linksToOpen.shift ();
        mywin2 = window.open (link, "my_win2");

        mywin2.addEventListener ('load', openLinksInSequence, false);
    }
}