Question

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

＆＃13;

 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);

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

那里有几个问题：

clearInterval(varname);将使用参数clearInterval调用varname，这是您在传递时传递的变量的值 ，当你正在看它时（因为，p1的值被读取然后传递给函数）。虽然可以通过使用对象的属性并传递属性名称来解决这个问题，但还有更好的方法。
您的所有计数器共享相同的i变量，因此至少您无法停在i == precent，因为三者中只有一个会看到它。它也使计数器奇怪地增加。
这是“百分之”，而非“上升”。： - ）

我会使用单独的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）或括号表示法和字符串来引用属性属性名称（obj["foo"]）。

我倾向于选择第一个例子。

Answer 2

首先，将== precent更改为>= precent 然后，在if (i >= precent) clearInterval(varname);下，添加 if (i >= precent) $(tag_name).html(precent + "%"); 这解决了问题，并按预期工作。

我在http://jsfiddle.net/0rukk816/1/

有一个小提琴

Answer 3

更改此行

if (i == precent) clearInterval(varname);

使用新的

if (i >= precent) clearInterval(varname);

setInterval（）函数不起作用

3 个答案: