数字增量与jquery

Number increment with jquery

本文关键字：jquery 数字      更新时间：2023-09-26

我如何使用下面的代码来显示变量增量而不影响彼此，我试图在同一页面上使用脚本来显示不同的值，增加加班，但我在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>

虽然dzylich的答案是正确的，但这里有一个更全面的解释:

Javascript有一个全局作用域，没有模块或命名空间的知识。在script标记的顶部作用域中声明的任何var都位于全局命名空间中，因此您的代码运行时就像您写过:

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

在同一script。避免此问题的一种常用方法是将每段代码包装在一个立即调用的函数表达式(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包装块中访问另一个IIFE包装块中的内容，除非你显式地返回它们，参见揭示的模块模式。

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

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

这是因为您的count声明相互覆盖。更改一个count变量的名称，它应该工作。

相关文章：