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

我认为你可以将代码块包装在IFEE中，即

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

Answer 2

虽然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创建一个新的作用域），所以两个'counter1'实际上是不同的变量。请注意，除非明确返回，否则您无法访问另一个IIFE包裹块中的内容，请参阅revealing module pattern。

Answer 3

这是因为您的count声明会相互覆盖。更改其中一个count变量的名称，它应该有效。

使用jquery增加数字

3 个答案: