作为 setInterval 函数创建的全局变量无法从函数内部访问

Question

我在全局范围内设置了一个时间间隔，以便可以在函数内清除和重新启动它。但是，当我从函数中调用它时，它似乎是未定义的。我的理解（我刚刚阅读了大量内容）是在函数之外定义的 Javascript 变量（var this = '' OR var this;）是全局的，并且可以从代码中的其他任何地方访问。每次我从函数中检查我的（据称）全局变量时，它都无法访问。

至于定义我的全局变量，我尝试了一些选项，但都没有奏效。我试过设置变量但没有给它一个值：

var mainTimeout;

我已经尝试设置它并给它一个初始值：

var mainTimeout='x';

我已尝试将其设置为最终的实际时间间隔：

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

无论我选择哪个选项，我都会尝试稍后从这样的函数中调用它：

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

没有失败，我总是得到控制台记录“没有设置超时变量”。因此，即使我在全局范围内定义了我的变量，它也永远不会在函数内被识别。这样做的结果是我的时间间隔只是堆叠并且在函数被触发几次后它不断触发。请帮忙，我没有想法！

完整代码：

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

您的代码应该可以正常工作：

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>

Answer 2

好的，我想通了。感谢@Mischa，帮助我意识到发生了什么。问题是我每次都在函数内重置变量。所以变量实际上最终没有全局范围。谷歌搜索“如何从函数内定义全局变量”。原来最好的方法是从内部函数设置“window.myVar”。最终只制作了一个函数来停止并重新启动间隔：

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

我可以从脚本中的任何位置运行它，它会起作用！