页面中有多个倒计时怎么办?如何避免多个 setInterval() 带来的性能消耗问题?
这里试着采用 构造函数 + 原型继承 的方式来进行优化,请看代码!
// 基于JQuery
/*
**倒计时构造函数
* endTime 结束时间对象
* $obj 倒计时显示区域对象
* words 倒计时说明文字
*/
function CountTimeDown(endTime, $obj, words) {
this.el = $obj;
this.endTime = endTime;
this.words = words ? words : "";
// 开启倒计时
this.timer();
}
//初始化
CountTimeDown.prototype.init = function() {
this.now = new Date();
//计算时间差
this.leftTime = parseInt((this.endTime.getTime() - this.now.getTime()) / 1000);
var leftTime = this.leftTime;
//计算“天,时,分,秒”
var d = parseInt(leftTime / 3600 / 24);
var h = parseInt((leftTime / 3600) % 24);
var m = parseInt((leftTime / 60) % 60);
var s = parseInt(leftTime % 60);
//补位
h = h > 9 ? h : ("0" + h);
m = m > 9 ? m : ("0" + m);
s = s > 9 ? s : ("0" + s);
//更新时间
this.el.html(this.words + d + "天" + h + "小时" + m + "分" + s + "秒");
};
//倒计时方法
CountTimeDown.prototype.timer = function() {
var self = this;
this.timer = setInterval(function() {
self.init();
if (self.leftTime <= 0) {
self.el.html("活动已结束");
clearInterval(self.timer);
}
}, 1000);
};
近期模拟了个小型电商网站项目,借鉴了慕课上很多相关课程的知识,对于其中一些常见特效,如倒计时、选项卡焦点图、放大镜、楼梯、购物车等,可算是熟练掌握了。对AJAX、cookie、跨域、构造函数、面向对象等知识,也有了更深入地了解,感谢慕课、各位老师,以及诸位小伙伴,现将部分代码与大家分享一下。不足之处,还望指正!
2024 - 快车库 - 我的知识库 重庆启连科技有限公司 渝ICP备16002641号-10
企客连连 表单助手 企服开发 榜单123