Javascript, конфликтующий с eachover

Question

У меня есть два куска java-скрипта, один для показа процентного результата в индикаторе выполнения, один для отображения скорости в другой строке.

В настоящий момент только один батон восстанавливает данные, другой нет.

JavaScrip

// Progress bar javascrip reults 
    { 
     var elem = document.getElementById("myBar"); 
     var width = 0; 
     var id = setInterval(frame, 50); 

     function frame() { 
      if (width >= document.getElementById("results-percentile-2").innerHTML) { 
       clearInterval(id); 
      } else { 
       width++; 
       elem.style.width = width + '%'; 
       document.getElementById("demo").innerHTML = width * 1 + '%'; 
      } 
     } 
    } 

    // End javascript progress bar results 

    // Progress bar javascrip speed 
    { 
     var elem = document.getElementById("myBarspeed"); 
     var width = 0; 
     var id = setInterval(frame, 50); 

     function frame() { 
      if (width >= document.getElementById("results-speed").innerHTML) { 
       clearInterval(id); 
      } else { 
       width++; 
       elem.style.width = width + '%'; 
       document.getElementById("speed").innerHTML = width * 1 + '%'; 
      } 
     } 
    } 

    // End javascript progress bar speed 

HTML

<div class="scale-container-main "> 
         <div id="percentile-scale" class="scale"> 

          results bar: Your results 
          <div id="demo">0%</div> 
          <div class="myProgress"> 
           <div id="myBar" style="width:0"></div> 
          </div> 

          speed bar: Your speed 
          <div id="speed">0%</div> 
          <div class="myProgress"> 
           <div id="myBarspeed" style="width:0"></div> 
          </div> 

         </div> 
        </div> 

Answer 1

Вы можете использовать let вместо вар внутри каждого блока, и

let frame = function() { .... } 

но кадр должен быть перемещен выше setInterval линии

Кроме того, выше, работает только на недавних приличных кроссах, что означает, что он не будет работать в IE

Альтернативный, не менее важный способ - использовать IIFE - это работает в IE!

(function() { 
    var elem = document.getElementById("myBar"); 
    var width = 0; 
    var id = setInterval(frame, 50); 

    function frame() { 
     if (width >= document.getElementById("results-percentile-2").innerHTML) { 
      clearInterval(id); 
     } else { 
      width++; 
      elem.style.width = width + '%'; 
      document.getElementById("demo").innerHTML = width * 1 + '%'; 
     } 
    } 
}()); 

// End javascript progress bar results 

// Progress bar javascrip speed 
(function() { 
    var elem = document.getElementById("myBarspeed"); 
    var width = 0; 
    var id = setInterval(frame, 50); 

    function frame() { 
     if (width >= document.getElementById("results-speed").innerHTML) { 
      clearInterval(id); 
     } else { 
      width++; 
      elem.style.width = width + '%'; 
      document.getElementById("speed").innerHTML = width * 1 + '%'; 
     } 
    } 
}()); 

Единственное преимущество выше является то, что имена переменных могут быть полезными и значимыми и гарантированно не конфликтовать ни с чем (вроде)

Answer 2

Вы не можете иметь две функции с тем же именем. Переименуйте функцию «frame» на что-то еще и измените ее в своем setInterval. Также используют различные переменные для хранения интервал в.