javascript - setInterval() 函数不起作用

Question

根据我的代码，当我计数到 60% 时我应该停止，但计数器将继续计数高于 60%。我应该停在 60%，但我却指望永远!我应该怎么做才能解决这个问题？

 var i = 0;
 function counter(tag_name, precent, varname) {
     i++;
     $(tag_name).html(i + "%");
     if (i == precent) clearInterval(varname);
 }
 var p1 = setInterval(function () {
     counter("#p1", 60, p1);
 }, 50);
 var p2 = setInterval(function () {
     counter("#p2", 60, p2);
 }, 50);
var p3 = setInterval(function () {
     counter("#p3", 60, p3);
 }, 50);

div {
    border:solid 1px black;
    margin:1px;
    width:50px;
    height:30p;
    float:left;
}
#m1, #m2, #m3 {
    width:200px;
    height:60px;
    float:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="m1">
    <div id="b1">d1</div>
    <div id="p1">%</div>
</div>
<div id="m2">
    <div id="b2">d2</div>
    <div id="p2">%</div>
</div>
<div id="m3">
    <div id="b3">d3</div>
    <div id="p3">%</div>
</div>

Answer 1

这里有几个问题:

1. clearInterval(varname); 将使用参数 varname 调用 clearInterval，这是您传入的变量的值在你传递它的时候，而不是在你查看它的时候(因为，比方说，p1 的值被读取然后传递给函数)。虽然您可以通过使用对象的属性并传递属性名称来解决这个问题，但还有更好的方法。

2. 您的所有计数器共享相同的 i 变量，因此至少您不能在 i == precent 处停止，因为只有一个三人将永远看到这一点。它还使计数器奇怪地增加。

3. 它是“百分比”，而不是“百分比”。 :-)

我会使用单独的 i 变量，让 counter 自行管理事物，并且可能使用 setTimeout 链而不是 setInterval :

function counter(tag_name, percent) {
    var i = 0;

    run();

    function run() {
        i++;
        $(tag_name).html(i + "%");
        if (i < percent) {
            setTimeout(run, 50);
        }
    }
}
counter("#p1", 60);
counter("#p2", 60);
counter("#p3", 60);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p id="p1"></p>
<p id="p2"></p>
<p id="p3"></p>

但是如果你想让他们共享i，你可以使用我之前提到的属性:

var i = 0;
var handles = {};

function counter(tag_name, percent, propname) {
    i++;
    if (i >= percent) clearInterval(handles[propname]);
    if (i <= percent) $(tag_name).html(i + "%");
}
handles.p1 = setInterval(function () {
    counter("#p1", 60, "p1");
}, 50);
handles.p2 = setInterval(function () {
    counter("#p2", 60, "p2");
}, 50);
handles.p3 = setInterval(function () {
    counter("#p3", 60, "p3");
}, 50);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p id="p1"></p>
<p id="p2"></p>
<p id="p3"></p>

之所以可行，是因为在 JavaScript 中，您可以使用点符号和文字 属性名称 (obj.foo) 或方括号符号和 来引用属性em>string 属性名称 (obj["foo"])。

不过，我倾向于使用第一个示例。