javascript - 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 有一个全局作用域，不了解模块或命名空间。在 script 标记的顶部范围中声明的任何 var 都位于全局命名空间中，因此您的代码运行就像您编写的一样:

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

在同一个脚本中。避免此问题的一种常见方法是将每段代码包装在 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 创建了一个新的作用域)，所以两个“counter1”实际上是不同的变量。请注意，除非您显式返回它们，否则您无法访问一个 IIFE 包装 block 中的内容，请参阅 revealing module pattern .