<!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>
La première question est de savoir si l'apparence finale obtenue par if(num==1000) et if(num==900) est différente ? Quand num==900, sauf le dernier qui diffère de quelques 900, les autres sont tous à 900. Quand il est 1000, tous les li peuvent-ils devenir 1000 ?
La deuxième question est que la fonction dans la minuterie est écrite comme ceci. Pourquoi seul le dernier li est-il arrêté et l'autre li ne peut-il pas être arrêté ?
timer = setInterval(function(){
if (num == 998) {
clearInterval(timer);
}
num++;
$(value).text(num);
},50)
timer est une variable globale et sa référence pointe vers le dernier timer lié. Lorsque clearInterval, seul le dernier timer lié est arrêté, le nombre ne change plus simplement parce que num n'augmente plus. ) dans le minuteur et vous constaterez que seul le dernier minuteur s'est arrêté
Quant à savoir pourquoi 1000 est comme ça mais 900 ne l'est pas, c'est parce que 1000/8 est divisible et dépend du nombre d'éléments li. C'est juste une coïncidence et il n'y a pas de raison particulière
.