Global variable created as setInterval function not accessible from within functions

Question

I am setting an interval in the global scope so it can be cleared and restarted within functions. However, when I call it from within a function, it seems to be undefined. My understanding (and I've just done a ton of reading) is that Javascript variables defined outside of functions (var this = '' OR var this;) are global and accessible from anywhere else in the code. Every time I check my (allegedly) global variable from within a function, it is inaccessible.

As far as defining my global variable, I have tried a few options and none have worked. I have tried setting the variable but not giving it a value:

var mainTimeout;

I have tried setting it AND giving it an initial value:

var mainTimeout='x';

I have tried setting it as the actual time interval that it will eventually be:

var mainTimeout = setInterval(function(){setTimeClckState('default');}, 15000);

Regardless of which option I choose, I try calling it later from within a function like this:

$(".timeClckControls input[type=button]").click(function(){
    if(mainTimeout){clearInterval(mainTimeout)}else{console.log('no timeout var set');};
});

Without fail, I always get console logged "no timeout var set". So it is never being recognized from within the function, even though I defined my variable with global scope. The result of this is that my time interval just stacks and it constantly triggers after the function is triggered a few times. Please help, I am out of ideas!

Full Code:

var mainTimeout = setInterval(function(){setTimeClckState('default');}, 15000);

$(".timeClckControls input[type=button]").click(function(){
    if(!($(this).val()=='IN')&&!($(this).val()=='OUT')){
        // IF CLEAR BUTTON, SET TIME CLOCK TO DEFAULT
        if($(this).val()=="CL"){
            setTimeClckState('default');
        // IF BUTTON IS 4TH CHARACTER
        }else if($('#empIDTxt').val().length==3){
            $('#empIDTxt').val($('#empIDTxt').val()+$(this).val());
            $('.timeClckControls .btn-primary').prop('disabled',true);
            getEmpData();
        }else{
            $('#empIDTxt').val($('#empIDTxt').val()+$(this).val());
        }
    }
    if(mainTimeout){clearInterval(mainTimeout)}else{console.log('no timeout var set');};
    var mainTimeout = setInterval(function(){setTimeClckState('default');}, 15000);

});

function setTimeClckState(state){
    switch(state){
        case "default":
            $('.timeClckControls input[type=text]').val('');
            $('.timeClckControls input[type=button]').prop('disabled',false);
            $('#statusDiv .alert').removeClass('alert-warning');
            $('#statusDiv .alert').removeClass('alert-success');
            $('#statusDiv .alert').addClass('alert-secondary');
            $('#statusDiv .alert').html(' ');

            $('#clockInOutBtn').removeClass('btn-warning');
            $('#clockInOutBtn').removeClass('btn-success');
            $('#clockInOutBtn').addClass('btn-secondary');
            $('#clockInOutBtn').prop('disabled',true);
            $('#clockInOutBtn').val('CLK');

            $('#clearBtn').removeClass('btn-warning');
            $('#clearBtn').removeClass('btn-success');
            $('#clearBtn').addClass('btn-secondary');
            $('#clearBtn').prop('disabled',true);
            break;
        case 'clockedIn':
            $('#clearBtn').prop('disabled',false);
            $('#clockInOutBtn').prop('disabled',false);

            $('#clockInOutBtn').removeClass('btn-success');
            $('#clockInOutBtn').addClass('btn-warning');
            $('#clockInOutBtn').val('OUT');
            break;
        case 'clockedOut':
            $('#clearBtn').prop('disabled',false);
            $('#clockInOutBtn').prop('disabled',false);

            $('#clockInOutBtn').addClass('btn-success');
            $('#clockInOutBtn').removeClass('btn-warning');
            $('#clockInOutBtn').val('IN');
            break;
    }
}

Answer 1

Okay I figured it out. Thanks to @Mischa, helped me realize what was happening. Problem was that I'm resetting the variable from within a function each time. So the variable actually ends up not having global scope. Googled "how to define global variable from within function". Turns out the best way is to set "window.myVar" from inside function. Ended up just making one function to stop and restart the interval:

function stopStartClearInt(){
    if(window.mainTimeout){clearInterval(window.mainTimeout)}else{console.log('no timeout var set');};
    window.mainTimeout = setInterval(function(){
        setTimeClckState('default');
        console.log('Interval check');
    }, 5000);
}

I can run this from literally anywhere in my script and it will work!

Answer 2

Your code should work fine:

function setTimeClckState(str) {
  console.log(str);
}

var mainTimeout = setInterval(function(){setTimeClckState('default');}, 500);

$(".timeClckControls input[type=button]").click(function(){
    if(mainTimeout){
      clearInterval(mainTimeout)
    } else {
      /**
       * The return value of setInterval is just a unique id you use to pass back to
       * clearInterval. It's not a structured object with any additional information, 
       * nor does it get set to null when you call clearTimeout. So even its cleared
       * it will never be falsy
       */
      console.log('no timeout var set');
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="timeClckControls">
  <input type="button" value="click me" />
</div>