setInterval代码的优化建议,该代码显示每秒出生的小狗、小猫等数量
Optimization suggestions for setInterval code that display how many puppies, kittens, etc. are born every second
我正在进行一个项目,该项目将以许多"逐秒"计时器为特色,这些计时器将显示每秒有多少动物出生:)对于如何最好地优化该脚本以获得性能和DRY ish,你有什么建议吗?
JSFiddle在这里-http://jsfiddle.net/gJy4x/32/
var start = new Date(),
midnight = new Date(start.getFullYear(), start.getMonth(), start.getDate(), 0),
first = new Date(start.getFullYear(), start.getMonth(), 1);
setInterval(function () {
var now = new Date(),
secondsFromStart = Math.floor((now - start)/1000),
secondsFromMidnight = Math.floor((now - midnight)/1000),
secondsFromFirst = Math.floor((now - first)/1000),
puppiesBornPerSec = 3.16,
puppiesStart = Math.round(secondsFromStart*puppiesBornPerSec*100) / 100,
puppiesMidnight = Math.round(secondsFromMidnight*puppiesBornPerSec*100) / 100,
puppiesFirst = Math.round(secondsFromFirst*puppiesBornPerSec*100) / 100;
// 3 puppies born every second
$('#badge01').text(puppiesStart.toFixed(2));
$('#s01 .morning').text(puppiesMidnight.toFixed(2));
$('#s01 .month').text(puppiesFirst.toFixed(2));
// 5 kittens born every second
$('#badge02').text(Math.floor(secondsFromStart*5));
$('#s02 .morning').text(Math.floor(secondsFromMidnight*5));
$('#s02 .month').text(Math.floor(secondsFromFirst*5));
// 7 rats born every second
$('#badge03').text(Math.floor(secondsFromStart*7));
$('#s03 .morning').text(Math.floor(secondsFromMidnight*7));
$('#s03 .month').text(Math.floor(secondsFromFirst*7));
}, 1000);
包含省略整数小数的数据的解决方案如下所示
在这种情况下,你需要添加一个类"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>
JS-
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);
http://jsfiddle.net/gJy4x/34/
除了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'),
});
});
相关文章:
- 从桌面读取python文件时高亮显示代码
- 如何将函数包装在函数中以避免代码重复
- 通过单击表单中的按钮,在代码生成中使用javascript生成字母数字代码
- 货币代码为欧元-金额的格式不应包含小数
- Regex代码只允许一个空格
- 如何将屏幕分辨率乘以 80%,然后在代码中使用
- 从var向代码隐藏函数传递值
- 如何动态插入jquery代码
- 如何在php变量中嵌入JQuery代码
- 代码不会验证
- 如何从rails中的代码中删除新行( )
- Angularjs代码未在匿名函数中运行
- 如何做到这一点,使代码在不传递条件后执行函数
- 如何在读取XLS/XLSX本地文件时,使用IE的javascript代码启用未标记为安全的ActiveX控件
- 面向对象的Javascript代码在IE7中不起作用
- 将 jQuery 代码添加到 Index.aspx 页面
- 为什么忽略了eval()代码中的语法错误
- 为什么获胜't我的javascript代码显示一个在当前日期出生的名人的名字
- 我需要让用户输入他的出生日期,并使用javascript检查其形式是否正确.我的代码不起作用
- setInterval代码的优化建议,该代码显示每秒出生的小狗、小猫等数量