jQuery/JavaScript：使用相同的按钮启动和终止循环

我想构建一个按钮，当我点击它时，JavaScript中与之相关联的函数将启动（因此它内部的一个循环将开始执行某些操作）

如果我在函数内的循环完成之前再次单击它，循环将终止

如果我在函数内的循环完成后再次单击它，循环将像往常一样开始

我如何使用以下代码来实现这一点？ 提前谢谢

HTML:

<button id="startstop" class="btn btn-primary" onclick="count()">

function count() {
    var val = 0;
    var loop = setInterval(function(){
        val++;
        if (val > 1000} {
           clearInterval(loop);
        }
    }, 100);
}

试试这个代码

var loop; 
function count() {
    var val = 0;
      if (loop) {
        clearInterval(loop);
        loop = null;
      }
      else{
     loop = setInterval(function(){
        val++;
        console.log(val);
        if (val > 1000) {
           clearInterval(loop);
           loop = null;
        }
    }, 100);
      }
}

试试这个代码

var loop; 
function count() {
    var val = 0;
      if (loop) {
        clearInterval(loop);
        loop = null;
      }
      else{
     loop = setInterval(function(){
        val++;
        console.log(val);
        if (val > 1000) {
           clearInterval(loop);
           loop = null;
        }
    }, 100);
      }
}

---

将

循环

变量放置在全局范围内，每次用户单击“停止上一个循环”（如果它已经启动，如果没有启动它）

希望这有帮助

var循环=null；
计数=函数（）{
var=0；
//如果上一个循环已经开始，请停止它
if（循环！=null）{
清除间隔（循环）；
循环=空；
}否则{
循环=设置间隔（函数（）{
val++；
控制台日志（val）；
$（'span'）.text（val）；
如果（val>=20）{
清除间隔（循环）；
}
}, 100);
}
}

计数
0

将

循环

变量放置在全局范围内，每次用户单击“停止上一个循环”（如果它已经启动，如果没有启动它）

希望这有帮助

var循环=null；
计数=函数（）{
var=0；
//如果上一个循环已经开始，请停止它
if（循环！=null）{
清除间隔（循环）；
循环=空；
}否则{
循环=设置间隔（函数（）{
val++；
控制台日志（val）；
$（'span'）.text（val）；
如果（val>=20）{
清除间隔（循环）；
}
}, 100);
}
}

计数
0

我不太喜欢为别人做事，但在这个场合，我会屈服于

您需要将内部ID存储在函数外部，并以此为基础进行处理。如果未设置ID，则启动间隔，如果已设置，则停止间隔

请注意，我已经大大缩短了间隔的长度，以及在本例中它触发的次数

var\u intervalId=-1；
函数计数（）{
如果（_intervalId==-1）{
var=0；
_intervalId=setInterval（函数（）{
val++；
如果（val>200）{
clearInterval（_intervalId）；
_有效期=-1
document.getElementById（“输出”）.innerHTML=“自动停止”；
}
}, 10);
document.getElementById（“输出”）.innerHTML=“已启动”；
}否则{
clearInterval（_intervalId）；
_有效期=-1；
document.getElementById（“输出”）.innerHTML=“手动停止”；
}
}

点击这里

我不太喜欢为别人做事，但这次我会屈服于

您需要将内部ID存储在函数外部，并以此为基础进行处理。如果未设置ID，则启动间隔，如果已设置，则停止间隔

请注意，我已经大大缩短了间隔的长度，以及在本例中它触发的次数

var\u intervalId=-1；
函数计数（）{
如果（_intervalId==-1）{
var=0；
_intervalId=setInterval（函数（）{
val++；
如果（val>200）{
clearInterval（_intervalId）；
_有效期=-1
document.getElementById（“输出”）.innerHTML=“自动停止”；
}
}, 10);
document.getElementById（“输出”）.innerHTML=“已启动”；
}否则{
clearInterval（_intervalId）；
_有效期=-1；
document.getElementById（“输出”）.innerHTML=“手动停止”；
}
}

点击这里

我很高兴为此建立了一个小班。请随意使用

//计数器类
函数计数器（回调、速度、最大值、初始值）{
var循环=null；
this.callback=回调；
this.value=init | | 0；
this.max=max；
函数计数（）{
如果（this.max&&this.value>=this.max）{
清除间隔（循环）；
循环=空；
}否则{
这个.value++；
}
this.callback（this.value）；
}
this.start=函数（）{
如果（！this.istarted）{
循环=设置间隔（count.bind（此），速度）；
}
};
this.stop=函数（）{
如果（本文件已开始）{
清除间隔（循环）；
循环=空；
}
}
defineProperty（这个“isStarted”{get:function（）{
返回！！循环；
}});
}
//用法示例。
var结果=document.getElementById（“计数器”）；
var按钮=document.getElementById（“startstop”）；
//创建计数器和回调函数。
var计数器=新计数器（功能（val）{
result.innerHTML=val；
}, 100, 1000);
//初始化结果值。
result.innerHTML=counter.value；
//侦听按钮上的单击事件。
addEventListener（“单击”，函数（）{
如果（计数器已启动）{
计数器。停止（）；
}否则{
counter.start（）；
}
});

切换
我很高兴为此构建了一个小类。请随意使用


//计数器类
函数计数器（回调、速度、最大值、初始值）{
var循环=null；
this.callback=回调；
this.value=init | | 0；
this.max=max；
函数计数（）{
如果（this.max&&this.value>=this.max）{
清除间隔（循环）；
循环=空；
}否则{
这个.value++；
}
this.callback（this.value）；
}
this.start=函数（）{
如果（！this.istarted）{
循环=设置间隔（count.bind（此），速度）；
}
};
this.stop=函数（）{
如果（本文件已开始）{
清除间隔（循环）；
循环=空；
}
}
defineProperty（这个“isStarted”{get:function（）{
返回！！循环；
}});
}
//用法示例。
var结果=document.getElementById（“计数器”）；
var按钮=document.getElementById（“startstop”）；
//创建计数器和回调函数。
var计数器=新计数器（功能（val）{
result.innerHTML=val；
}, 100, 1000);
//初始化结果值。
result.innerHTML=counter.value；
//倾听