Приращение номера с помощью jquery

Question

Как я могу использовать приведенный ниже код, чтобы отображать приращение переменной, не затрагивая друг друга, я попытался использовать скрипт на той же странице, чтобы отображать разные значения, которые увеличивают время работы, но я получаю одинаковые значения в div1 и div2 даже подумал, что у них разный var, код ниже отлично работает, когда я использую их на отдельных страницах, но когда я собираю их на одной странице, я получаю одинаковый результат для обоих div.

мне нужна помощь, чтобы заставить их работать, не влияя друг друга или любой другой альтернативный

мне нужно код, который на самом деле работает, а не просто объяснение

<script> 
 
    var START_DATE = new Date("May 10, 2010 22:30:00"); 
 
    var INTERVAL = 8; 
 
    var INCREMENT = 60; 
 
    var START_VALUE = 250; 
 
    var count = 0; 
 
    $(document).ready(function() { 
 
    var msInterval = INTERVAL * 1000; 
 
    var now = new Date(); 
 
    count = parseInt((now - START_DATE)/msInterval) * INCREMENT + START_VALUE; 
 
    $('#div1').html(count.toFixed(0)); 
 
    window.setInterval(function(){ 
 
     count1 += INCREMENT; 
 
     $('#div1').html(count.toFixed(0)); 
 
    }, msInterval); 
 
    }); 
 
    </script> 
 

 
    <script> 
 
    var START_DATE = new Date("March 10, 2010 22:30:00"); 
 
    var INTERVAL = 10; 
 
    var INCREMENT = 10; 
 
    var START_VALUE = 350; 
 
    var count = 0; 
 
    $(document).ready(function() { 
 
    var msInterval = INTERVAL * 1000; 
 
    var now = new Date(); 
 
    count = parseInt((now - START_DATE)/msInterval) * INCREMENT + START_VALUE; 
 
    $('#div2').html(count.toFixed(0)); 
 
    window.setInterval(function(){ 
 
     count1 += INCREMENT; 
 
     $('#div2').html(count.toFixed(0)); 
 
    }, msInterval); 
 
    }); 
 
    </script>

Answer 1

Хотя ответы dzylich является правильным, здесь более подробное объяснение того, что происходит:

Javascript имеет один глобальный охват с не знание модулей или пространств имен. Любой var объявлен в верхней области видимости script тега в глобальном пространстве имен, так что ваш код работает, как если бы вы написали:

var count1 = whatever; 
//do some stuff 
var count1 = whatever; //count1 redeclared! 

в том же script. Один общий метод, чтобы избежать этой проблемы, чтобы обернуть каждый кусок кода в Immediately Invoked Function Expression (IIFE), чтобы создать возможности для каждого тега сценария:

<script> 
    (function() { 
     var counter1 = whatever; 
     //do stuff to counter1 
    })(); 
</script> 

<script> 
    (function() { 
    var counter1 = whatever; //different than the other counter1, exp follows 
    //do whatever 
    })(); 
</script> 

Поскольку каждый фрагмент кода, завернутый в функции (которая создает новая область для var s, определенная в этой функции), два «counter1» - фактически разные переменные. Обратите внимание, что вы не можете получить доступ к вещам в одном обойденном блоке IIFE в другом, если вы явно не возвращаете их, см. Раздел revealing module pattern.

Answer 2

Это потому, что ваш count декларации переписывают друг друга. Измените имя одной из ваших count переменных, и оно должно работать.

Answer 3

Я думаю, вы могли бы обернуть блоки кода в IFEE, т.е.

(function(){ 
    //code here 
}());