jquerysetinterval如何实现循环？详细代码演示！

今儿个，咱来聊聊jQuery里的setInterval这个玩意儿，我是咋用它来实现一些小功能的。就是让一段代码每隔一段时间就自动执行一遍，就像个闹钟似的，到点儿就响。

捣鼓前的准备

你得把jQuery库给弄到你的项目里头。这玩意儿就像个工具箱，里面有各种方便的工具，让咱少写很多代码。

开始动手

咱得有个目标，就是你要让哪段代码重复执行。比如说，我想让一个数字每秒钟加1，就可以这么写：


<p>数字：<strong id="number">0</strong></p>

这里弄个<p>标签来显示数字，用<strong>标签是因为我想让数字看起来显眼点儿。id="number"是为方便jQuery找到这个数字。

然后，就是重头戏，用setInterval来实现循环：


<script>

$(document).ready(function() {
// 先定义一个变量，用来存数字
let num = 0;
// 这就是setInterval的用法，每隔1000毫秒（也就是1秒）执行一次里面的代码
setInterval(function() {
// 数字加1

num = num + 1;
// 把新的数字显示到页面上
$('#number').text(num);
}, 1000);

</script>

把这段代码放到你的HTML文件里，用浏览器打开，就能看到数字每秒钟自动加1。这里我有几个小细节：

使用$(document).ready()来确保页面加载完再执行代码。
setInterval()里面放一个匿名函数，每次循环都会执行这个函数里的代码。

jquerysetinterval如何实现循环？详细代码演示！

使用$('#number').text(num)来更新页面上的数字，#number就是之前定义的那个id。

收尾工作

如果你想让这个循环停下来，可以用clearInterval()这个函数。不过你得先把setInterval()返回的那个ID存起来，像这样：



<script>
$(document).ready(function() {
let num = 0;
// 把setInterval返回的ID存到timer变量里
let timer = setInterval(function() {
num = num + 1;

$('#number').text(num);
}, 1000);
// 假设有个按钮，点击后停止循环
$('#stopButton').click(function(){
clearInterval(timer);



</script>