What is the scope of setTimeout() and clearTimeout() in JavaScript?

Question

30 seconds after a page is loaded/reloaded, I display a pop-up if certain conditions are met. This is the code I use to achieve that an it works correctly:

jQuery(document).ready(function($) {
    ..........
    if (localStorage.getItem("displaypopup") == "true") {
        var ticker = setTimeout(function() {
            $('#colorboxform').click();
        }, 30000);
    }
    ..........
}

I have a button that triggers that same pop-up. If someone clicks that button I want to cancel the setTimeout() operation that I configured in the code above because I do not want for the pop-up to be invoked again, redundantly, when the user already clicked the button to display the pop-up. In an attempt to cancel the setTimeout() operation, I used this:

jQuery(document).ready(function($) {
    ..........
    $("#headercolorboxform").click(
        function() {
            clearTimeout(ticker);
        }
    );
    ..........
}

Unfortunately, it is not working. I still get the pop-up 30 seconds after the page was loaded/reloaded, even after I click the button to trigger the pop-up. Apparently, clearTimeout(ticker) is not doing what I intended. I suspect this is a scope issue. The pieces of my code together are:

jQuery(document).ready(function($) {
    ..........
    if (localStorage.getItem("displaypopup") == "true") {
        var ticker = setTimeout(function() {
            $('#colorboxform').click();
        }, 30000);
    }
    $("#headercolorboxform").click(
        function() {
            clearTimeout(ticker);
        }
    );
    ..........
}

Do you know what the problem is in my code? Why clearTimeout(ticker) is not cancelling setTimeout(). Maybe this is a scope problem? I appreciate your help. Thank you.

UPDATE 1:

I tried the following, assuming I am dealing with a scope problem, but it does not work. I still get the pop-up redundantly after 30 seconds.

jQuery(document).ready(function($) {
    ..........
    var ticker;
    if (localStorage.getItem("displaypopup") == "true") {
        ticker = setTimeout(function() {
            $('#colorboxform').click();
        }, 30000);
    }
    $("#headercolorboxform").click(
        function() {
            clearTimeout(ticker);
        }
    );
    ..........
}

Just to be clear about scope do you have multiple `jQuery(document).ready(function($) {` as shown? — charlietfl, May 11 '20 at 04:08
@charlietfl I only have one `jQuery(document).ready(function($) {`. — Jaime Montoya, May 11 '20 at 04:09
Ok...is valid having more than one but a bit confusing when you have wrapped multiple code blocks in individual ones as shown — charlietfl, May 11 '20 at 04:10
@charlietfl You are right. I should have shown only my third block of code, which already includes the first and second. I just wanted to focus on each piece independently as I explained my problem but I think it made the question more difficult to understand. Thanks for pointing that out. — Jaime Montoya, May 11 '20 at 04:12
I noticed that you display the popup by synthetically clicking the button. In your setTimeout, the button's ID is `#colorboxform` and the on-click trigger is attached to an element with ID `#headercolorboxform`. Without seeing the rest of the code, I can't say if that's an error or not, but did you possibly use the wrong ID in one of the locations? — Elan Hamburger, May 11 '20 at 04:22
@ElanHamburger I have an `` element that is hidden. I use `JavaScript` to click it when a button is pressed. That triggers the pop-up. That part is working correctly. The pop-up is displayed as I want. What is not working correctly is that I invoke `clearTimeout(ticker)` but it does not cancel the `setTimeout()` operation that I had previously set. This is not a caused by using wrong IDs for `HTML` elements in my code. Good observation though. — Jaime Montoya, May 11 '20 at 04:30

Jaime Montoya · Answer 1 · 2020-05-11T14:17:07.437

I followed the example at https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_win_cleartimeout as the foundation to write my code. This was my solution that worked correctly as I wanted:

jQuery(document).ready(function($) {
    ..........
    var ticker;
    function startCounting30Seconds() {
        ticker = setTimeout(function() { 
            $('#colorboxform').click();
        }, 30000);
    }
    function cancelCounting30Seconds() {
        clearTimeout(ticker);
    }
    if (localStorage.getItem("displaypopup") == "true") {
        startCounting30Seconds();
    }
    $("#headercolorboxform").click(function(){
            cancelCounting30Seconds();
        }
    );
    ..........
}

What is the scope of setTimeout() and clearTimeout() in JavaScript?

1 Answers1