How can i remove this setTimeout function

Question

I'm initiating a popup if the user is inactive on the page but want the function that shows the popup to be removed if the user closes the popup, as this is just annoying having this pop open every XX amount of seconds.

This is the function I'm using to call the popup.

<script type="text/javascript">
var timeoutID;

function setup() {
    this.addEventListener("mousemove", resetTimer, false);
    this.addEventListener("mousedown", resetTimer, false);
    this.addEventListener("keypress", resetTimer, false);
    this.addEventListener("DOMMouseScroll", resetTimer, false);
    this.addEventListener("mousewheel", resetTimer, false);
    this.addEventListener("touchmove", resetTimer, false);
    this.addEventListener("MSPointerMove", resetTimer, false);

    startTimer();
}
setup();

function startTimer() {
    // wait 20 seconds before calling goInactive
    timeoutID = window.setTimeout(goInactive, 20000);
}

function resetTimer(e) {
    window.clearTimeout(timeoutID);

    goActive();
}


function goActive() {         
    startTimer();
}

function goInactive() {
    $.magnificPopup.open({
        mainClass: "mfp-fade",
        fixedContentPos: false,
        fixedBgPos: true,
        items: {
            src: "#needtochat"
        },
        removalDelay: 1000, //delay removal by X to allow out-animation
          callbacks: {
            beforeOpen: function() {
               this.st.mainClass = "mfp-3d-unfold";
            },
            close: function() {
                window.clearTimeout(timeoutID); // Thought this may remove the timer function all together?
            }
          },
        type: "inline"}, 0);
}

</script>

You'll notice the function goInactive() shows the modal window and I have a callback close: that I hoped would clear the function.

Answer 1

Assuming that the close callback works as advertised, the timeout will be being cleared. However, you have attached several event listeners that will immediately recreate the timeout as soon as something happens. There are two options here.

Option 1: Remove the event listeners, in addition to clearing the timer:

function teardown() {
    this.removeEventListener("mousemove", resetTimer);
    this.removeEventListener("mousedown", resetTimer);
    this.removeEventListener("keypress", resetTimer);
    this.removeEventListener("DOMMouseScroll", resetTimer);
    this.removeEventListener("mousewheel", resetTimer);
    this.removeEventListener("touchmove", resetTimer);
    this.removeEventListener("MSPointerMove", resetTimer);
}

and within the close handler:

close: function() {
    teardown();
    window.clearTimeout(timeoutID);
}

Option 2: Create a flag and use that to control the creation of the timer:

var popupClosed = false;

function resetTimer(e) {
    window.clearTimeout(timeoutID);
    if (!popupClosed)
        goActive();
}

And set that within the close handler:

close: function() {
    popupClosed = true;
    window.clearTimeout(timeoutID);
}

Answer 2

As I understand you can add a variable, for example:

var popupBeenClosed = false;

change it to true in the "close" callback, and add a check in the resetTimer():

function resetTimer(e) {

    if (!popupBeenClosed) {

        window.clearTimeout(timeoutID);
        goActive();
    }

}