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); будет называть clearInterval с аргументом varname, что значение переменных вы передаете в , как когда вы передайте его, не позже, когда вы смотрите на него (потому что значение, скажем, p1, считывается, а затем передается в e). Хотя вы можете исправить это, используя свойства объекта и передав имя свойства, есть лучший способ.

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) или скобкой обозначения и строки имени свойства (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);