javascript - each方法里的定时器的问题
本文介绍了javascript - each方法里的定时器的问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>each</title>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<ul>
<li class="on">0</li>
<li class="on">0</li>
<li class="on">0</li>
<li class="on">0</li>
<li class="on">0</li>
<li class="on">0</li>
<li class="on">0</li>
<li class="on">0</li>
</ul>
<script type="text/javascript">
var num = 0,
timer = null;
$(".on").each(function (index, value) {
timer = setInterval(function(){
if (num == 900) {
clearInterval(timer);
}else{
num++;
}
$(value).text(num);
},50)
})
</script>
</body>
</html>第一个疑问if(num==1000)和if(num==900)得到的最后样子不同？num==900时，除了最后一个差几个900，其他的都是900，而1000时，li可以全变成1000？
第二个疑问定时器里的函数写成这样为什么只有最后一个li停了其他的li停不下来
timer = setInterval(function(){
if (num == 998) {
clearInterval(timer);
}
num++;
$(value).text(num);
},50)解决方案
timer作为全局变量，他的引用指向了最后一个绑定的定时器，当clearInterval时只有最后绑定的那个定时器被停止了，数字不再变化仅仅是因为num不再增加了，你可以在定时器里console.log(num)，就会发现只有最后的定时器停下来了
至于为什么1000的是这样，900不是，是因为1000/8能整除，取决于li元素的个数，巧合而已，没有特别原因
这篇关于javascript - each方法里的定时器的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
