JavaScript 中的 setTimeout() 和 clearTimeout() 的 scope 是什么？

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);
        }
    );
    ..........
}

Answer 1

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();
        }
    );
    ..........
}