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（）函數不起作用

回答

相關問題