我有这个简单的代码：
var Modules = (function() {
'use strict';
return {
TIMER: function (){
var timer = null;
return {
time: 100,
init: function() {
this.counter();
this.timer = window.setInterval(this.counter, 1000);
},
counter: function() {
this.time -= 1;
if (this.time <= 0) {
window.clearInterval(this.timer);
alert('Time expired');
}
console.log(this.time);
this.viewer();
},
viewer: function() {
document.getElementById('timer').innerHTML = this.time;
}
}
}
};
}());
Modules.TIMER().init();
<div id="timer"></div>
出了点问题，因为我有两个错误：
this.viewer 不是一个函数
and
这次的 NaN
我的设计模式超出间隔运行有什么问题？
扩展TIMER后重置方法：
reset: function() {
this.time = 100;
}
并在外部调用它：Modules.TIMER().reset(); ?
I got
this.time 未定义
.
或者在 init 内部：
jQuery("body").on('keyup mouseup', function (e) {
this.reset();
});
我收到错误：
this.reset() 不是函数。
您的问题来自这一行：
this.timer = window.setInterval(this.counter, 1000);
当您在调用回调时setInterval方法，将this回调函数中不再引用您的TIMER对象，但是window.
解决方案A：使用.bind(this)绑定词汇this回调
您需要将当前上下文绑定到回调：
this.timer = window.setInterval(this.counter.bind(this), 1000);
var Modules = (function() {
'use strict';
return {
TIMER: function (){
var timer = null;
return {
time: 100,
init: function() {
this.counter();
this.timer = window.setInterval(this.counter.bind(this), 1000);
},
counter: function() {
this.time -= 1;
if (this.time <= 0) {
window.clearInterval(this.timer);
alert('Time expired');
}
console.log(this.time);
this.viewer();
},
viewer: function() {
document.getElementById('timer').innerHTML = this.time;
}
}
}
};
}());
Modules.TIMER().init();
<div id="timer"></div>
解决方案B：使用ES6箭头函数setInterval打回来
注意：就我个人而言，我更喜欢这个解决方案，因为它使用 ES6，但如果您仍然支持旧版浏览器并且不想转译 JS，这可能不是最好的解决方案。
另一种选择是在回调中使用箭头函数setInterval，而不是分配this.counter直接作为回调函数：
this.timer = window.setInterval(() => this.counter(), 1000);
箭头函数保留了词法this，所以当this.counter()被调用时它将使用相同的上下文，即内部this将引用您的TIMER object.
var Modules = (function() {
'use strict';
return {
TIMER: function (){
var timer = null;
return {
time: 100,
init: function() {
this.counter();
this.timer = window.setInterval(() => this.counter(), 1000);
},
counter: function() {
this.time -= 1;
if (this.time <= 0) {
window.clearInterval(this.timer);
alert('Time expired');
}
console.log(this.time);
this.viewer();
},
viewer: function() {
document.getElementById('timer').innerHTML = this.time;
}
}
}
};
}());
Modules.TIMER().init();
<div id="timer"></div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
