Javascript setInterval代码的优化建议,该代码显示每秒出生的小狗、小猫等数量

Javascript setInterval代码的优化建议,该代码显示每秒出生的小狗、小猫等数量,javascript,jquery,performance,Javascript,Jquery,Performance,我正在做一个项目,其中有许多“逐秒”计时器,可以显示每秒出生的动物数量:)你对我如何优化这个脚本以提高性能和效率有什么建议吗 我在这儿闲逛- 数据中省略整数小数的解决方案如下所示 在本例中,您需要添加一个类“s”和数据量 <section class="s" data-quantity="3.16" id="s01"> <h1>if 3.16 puppies are born every second</h1> <b id="badge0

我正在做一个项目,其中有许多“逐秒”计时器,可以显示每秒出生的动物数量:)你对我如何优化这个脚本以提高性能和效率有什么建议吗

我在这儿闲逛-


数据中省略整数小数的解决方案如下所示
在本例中,您需要添加一个类“s”和数据量

<section class="s" data-quantity="3.16" id="s01">
    <h1>if 3.16 puppies are born every second</h1>
    <b id="badge01" class="now">0</b> puppies have been born so far.<br>
    <b class="morning">?</b> puppies have been born today<br>
    <b class="month">?</b> puppies have been born since the first of this month.
</section>
<hr>
<section class="s" data-quantity="5" id="s02">
    <h1>if 5 kittens are born every second</h1>
    <b id="badge02" class="now">0</b> kittens have been born so far.<br>
    <b class="morning">?</b> kittens have been born today<br>
    <b class="month">?</b> kittens have been born since the first of this month.
</section>
<hr>
<section class="s" data-quantity="7" id="s03">
    <h1>if 7 rats are born every second</h1>
    <b id="badge03" class="now">0</b> rats have been born so far.<br>
    <b class="morning">?</b> rats have been born today<br>
    <b class="month">?</b> rats have been born since the first of this month.
</section>     

除了Abraham的脚本,为了实现最佳优化,如果可能的话,应该缓存循环中的所有内容。例如
$(“.s”)
.children('.now')
被多次执行

//cache them
var elems = [];
$(".s").each(function(){
   var $this = $(this);
   elems.push({
      obj: $this,
      data: $this.data('persec'),
      now: $this.children('.now'),
      morning: $this.children('.morning'),
      month: $this.children('.month'),
   });
});

你可以尝试使用数据,每个都像这样@AbrahamUribe-漂亮!对于没有小数的量,有没有办法省略小数?@AbrahamUribe-非常感谢你的帮助。有没有办法在10亿或10亿马克处添加逗号?你可以尝试使用类似“伟大”的东西!还有一个问题,你将如何整合@thanh关于如何缓存循环中的所有内容的建议?哇!这太棒了。谢谢@Abraham!
var start = new Date(),
midnight = new Date(start.getFullYear(), start.getMonth(), start.getDate(), 0),
first = new Date(start.getFullYear(), start.getMonth(), 1);
//create now Date outside Interval
var now = new Date(),
secondsFromStart = Math.floor((now - start)/1000),
secondsFromMidnight = Math.floor((now - midnight)/1000),
secondsFromFirst = Math.floor((now - first)/1000);
//create each $(".s").data with the values
$(".s").each(function(){
    var BornPerSec = $(this).data("quantity"),
    Start = secondsFromStart*BornPerSec,
    Midnight = secondsFromMidnight*BornPerSec,
    First = secondsFromFirst*BornPerSec;
    $(this).data("persec",{"BornPerSec":BornPerSec,"Start":Start,"Midnight":Midnight,"First":First});    
});
setInterval(function () {
    //increment each $(".s").data values and set .text
    $(".s").each(function(){
        var persec=$(this).data("persec");
        persec.Start+=persec.BornPerSec;
        persec.Midnight+=persec.BornPerSec;
        persec.First+=persec.BornPerSec;
        $(this).children('.now').text(persec.Start % 1 === 0 ?persec.Start: persec.Start.toFixed(2));
        $(this).children('.morning').text(persec.Midnight % 1 === 0 ?persec.Midnight:persec.Midnight.toFixed(2));
        $(this).children('.month').text(persec.First % 1 === 0 ?persec.First:persec.First.toFixed(2));
    });
}, 1000);    
//cache them
var elems = [];
$(".s").each(function(){
   var $this = $(this);
   elems.push({
      obj: $this,
      data: $this.data('persec'),
      now: $this.children('.now'),
      morning: $this.children('.morning'),
      month: $this.children('.month'),
   });
});