Javascript 停止不带全局变量的setInterval（）

我希望先开始，然后再停止一个setInterval，我遇到的所有示例都是使用全局变量来完成的，但如果可以的话，我宁愿不使用它

我有一个按钮启动设置间隔，另一个按钮停止设置间隔。我可以很好地启动它，但如果不使用全局变量，我无法停止它

这就是我所拥有的：

function counter() {
  function stop() {
    clearInterval(timer);
  }
  var timer = setInterval(function() {
    console.log(new Date());
  }, 1000);
  return stop;
}
$('#start').click(function() {
  counter();
});
$('#stop').click(function() {
  stop(); // this of course doesn't work
});

---

您需要一个全局变量，但您可以通过多种方式来实现，因此这里有一种方法，即HTML部分：

<button id="start">Start</button>
<button id="stop">Stop</button>

---

这里有一个

我想你需要一个静态变量。但不幸的是，javascript不支持静态变量。但是，我们可以创建一个。因为在javascript中，函数被解释为对象，所以它们可以有静态范围变量

函数计数器（）{
if（typeof counter.timer==“未定义”）{
计数器计时器=0；
}
counter.timer=setInterval（函数（）{
$（“#输出”）.text（新日期（））；
}, 1000);
}
函数停止（）{
清除间隔（计数器计时器）；
}
$（“#开始”）。在（'click'，function（）上{
计数器（）；
});
$（“#停止”）。在（'click'，function（）上{
停止（）；
});

开始
停止
您可以为此使用java脚本闭包，将代码更改为：

function counter (action, tId) {
   var timer =setInterval(function() {  
    console.log(new Date());
 }, 1000);
 if(typeof tId!="undefined")
    window.clearInterval(tId);
   return function () {
    if(action=='stop'){
    counter('stop', timer)
   }
  }
 }

 $('#start').click(function() {
  counter('start');
 });
 $('#stop').click(function() {
   counter('stop'); 
 });

实际上，如果操作是stop，我们要做的是使用interval id重新调用函数。
使用带有
const
或
的块让
将整个过程右包装在一个iife中。您应该将stop移出计数器函数，以便可以在$（'stop'）内调用它。单击（function（）{}），它不必是全局变量，但是您有权访问的一个变量。@user93
stop
是
return
ed。我对此进行了测试，但它不起作用。它只是触发了另一个setInterval（）。内部返回函数将当前计时器作为参数传递给tId，它将清除间隔，因为tId不再是未定义的。
function counter (action, tId) {
   var timer =setInterval(function() {  
    console.log(new Date());
 }, 1000);
 if(typeof tId!="undefined")
    window.clearInterval(tId);
   return function () {
    if(action=='stop'){
    counter('stop', timer)
   }
  }
 }

 $('#start').click(function() {
  counter('start');
 });
 $('#stop').click(function() {
   counter('stop'); 
 });