setInterval（）函数不起作用

根据我的代码，当我计数达到60％时，应该停止，但计数器将继续计数超过60％。我应该停止在60％，但我相信永远！我该怎么做才能解决这个问题？setInterval（）函数不起作用

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>

来源

2014-10-29 Keivan Sabil...

使用> =百分比，而不是==％的拨弄，它第二后辊接管和第三个副本命中... – dandavis 2014-10-29 08:50:50

问题是，你使用1个变量I，并且你称它为3次，这就是为什么你会得到60,61和62的结果。 – Nick 2014-10-29 09:00:56

几个问题有：

clearInterval(varname);将调用clearInterval的说法varname，这是可变的，你在传递当你的价值通过它，而不是稍后当你在看它（因为，例如，p1的值被读取，然后传递到第e功能）。虽然你可能通过使用对象的属性并传递属性名称来解决该问题，但还有更好的方法。
您的所有计数器共享相同的i变量，所以至少您不能停在i == precent，因为三个人中只有一个会看到。这也使得柜台奇怪地增加。
这是“百分比”，而不是“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"]）。

虽然我会倾向于第一个例子。

来源

2014-10-29 08:51:26

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

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

来源

2014-10-29 08:55:34

尽管这个答案在理论上可以回答这个问题，[最好在这里包含答案的基本部分]（http://meta.stackexchange.com/a/8259），并提供供参考的链接。请将相关内容直接添加到您的答案中，因为它可以防止链接腐烂。 – Unihedron 2014-10-30 11:37:06

变化这一行

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

用新

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

来源

2014-10-29 08:57:02

setInterval（）函数不起作用

回答

相关问题