javascript - 带有侦听器和回调的简单计数器

  显示原文与译文双语对照的内容
0 0

我有一个简单的类 below,它每秒钟启动一次。 如何为它添加功能以侦听特定值,然后激发回调?

function Counter() {
 this.currentCount = 0;
}
Counter.prototype.start = function() {
 setInterval(this.update, 1000);
};
Counter.prototype.when = function(value, callback) {
 callback(value);
};
Counter.prototype.update = function() {
 this.currentCount++;
};

在我看来它会像这样。

var counter = new Counter();
counter.when(50, function(value) {
 console.log('We arrived at ' + value + ', the requested value.');
});
counter.start();
时间:原作者:6个回答

0 0

这只是一个很好的作业,我会为你做的,请看我的解决方案:

function Counter() {
 this.currentCount = 0;
 this.conditions = [];
 this.interval = undefined;
}
Counter.prototype.start = function() {
 if (!this.interval) {
 var that = this;
 this.interval = setInterval(function () {
 that.update();
 }, 1000);
 }
};
Counter.prototype.stop = function () {
 if (this.interval) {
 clearInterval(this.interval);
 this.interval = undefined;
 }
 this.currentCount = 0;
};
Counter.prototype.when = function(value, callback) {
 var that = this;
 this.conditions.push(function () {
 if (that.currentCount === value) {
 callback.call(that, value);
 }
 });
};
Counter.prototype.update = function() {
 this.currentCount++;
 for (var i = 0, l = this.conditions.length; i <l; i++) {
 var condition = this.conditions[i];
 condition();
 }
};
var counter = new Counter();
counter.when(50, function(value) {
 console.log('We arrived at ' + value + ', the requested value.');
});
counter.when(60, function (value) {
 console.log('Stop at ' + value + '!');
 this.stop();
});
counter.start();

它是小提琴。

另一个答案在隐藏 private 变量时有很好的参数,但实现它有点混淆,这是另一种方法。 这不是共享Prototype函数,而是使用实例函数。 一些人可能认为这需要更多的内存,但我不认为它是重要的,并且允许在实际的构造函数中使用 privates 。

var Counter = function () {
 var that = this, currentCount = 0,
 conditions = [], interval;
 var update = function () {
 currentCount++;
 for (var i = 0, l = conditions.length; i <l; i++) {
 var condition = conditions[i];
 condition();
 }
 };
 this.start = function () {
 if (!interval) {
 interval = setInterval(function() {
 update.call(that);
 }, 1000);
 }
 };
 this.when = function (value, callback) {
 conditions.push(function () {
 if (currentCount === value) {
 callback.call(that, value);
 }
 });
 };
 this.stop = function () {
 if (interval) {
 clearInterval(interval);
 interval = undefined;
 }
 currentCount = 0;
 };
};
var counter = new Counter();
counter.when(50, function(value) {
 console.log('We arrived at ' + value + ', the requested value.');
});
counter.when(60, function (value) {
 console.log('Stop at ' + value + '!');
 this.stop();
});
counter.start();

看它

还要注意,在两个例子中,counterinstanceof CounterObject
counterinstanceof FunctionObject ( 我为什么要写这么多代码) )?

原作者:
0 0

要支持多个时间:

在你的课堂中添加时间的array:

function Counter() {
 this.currentCount = 0;
 this.whens = [];
}

然后让时间函数推送到该函数:

Counter.prototype.when = function(value, callback) {
this.whens.push({'time' : value, 'callback' : callback});
}

并在更新时检查这些信息:

Counter.prototype.update = function() {
 this.currentCount++;
 for(var w in this.whens) {
 if(this.currentCount == this.whens[w].time) {
 this.whens[w].callback();
 }
 }
}
原作者:
0 0

尝试更多的东西:

function Counter(interval, val, func){
 this.currentCount = 0;
 setInterval(function(){
 this.currentCount++;
 if(this.currentCount === val)func();
 }, interval);
}
var nc = new Counter(1000, 50, function(){
 console.log('We have arrived at '+nc.currrentCount);
});
原作者:
0 0

这里有一个类似这样的参数:

var Counter = (function() {
 var update = function() {
 var idx, callbacks;
 this.currentCount++;
 callbacks = this.callbacks[this.currentCount];
 if (callbacks) {
 for (idx = 0; idx <callbacks.length; idx++) {
 callbacks[idx](this.currentCount);
 }
 }
 };
 var start = function() {
 var counter = this;
 setInterval(function() {update.call(counter)}, 1000);
 };
 var when = function(count, callback) {
 (this.callbacks[count] || (this.callbacks[count] = [])).push(callback);
 };
 return function() {
 var config = {currentCount: 0, callbacks: {}};
 this.start = function() {return start.call(config);};
 this.when = function(count, callback) {
 return when.call(config, count, callback);
 };
//this.stop =.. .//if desired
 };
}());

这比基于Prototype版本的代码更具有内存密集性。 我不会用它来做你期望成百上千或者百万的物体的东西。 但是它的优点在于它真正封装了你可能想要隐藏的数据,比如 currentCount 和回调列表。 它不公开不必要的update 函数。 而且它并不像Prototype版本那样 每个实例都有自己的startwhen 函数,但是这些函数只是一些常见函数的。

如果你不介意公开 setInterval的结果,将 stop 函数添加到这个函数有点困难。 但这是可以做到的。

原作者:
...