Question

我正在全局范围内设置一个时间间隔，以便可以在函数中清除并重新启动它。但是，当我从函数中调用它时，它似乎未定义。我的理解（并且我已经做了大量的阅读）是，在函数外部定义的Javascript变量（var this =''或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('&nbsp;');

            $('#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);
}

我可以在脚本的任何地方运行它，它将起作用！

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

2 个答案: