作为 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

好的，我想通了。感谢@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);
}

我可以从脚本中的几乎任何地方运行它，它会起作用！

Answer 2

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

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>