然后Javascript在一个类中承诺

Question

I'm trying to understand how Promises are working and I can't get my piece of code to work.

class Lights {
    constructor(delay) {
        this.blue = 0;
        this.green = 0;
        this.red = 0;
        this.delay = delay;
    }

    fadeIn(color, i) {
        var self = this;
        return new Promise(function(resolve, reject) {
            setTimeout(function () {
                self[color] = i;
                console.log(self[color]);
                i+=5;
                if (i <= 255) {
                    self.fadeIn(color, i);
                }
                resolve(self);
            }, self.delay);
        });
    }

    fadeOut(color, i) {
        var self = this;
        return new Promise(function(resolve, reject) {
            setTimeout(function () {
                self[color] = i;
                console.log(self[color]);
                i-=5;
                if (i >= 0) {
                    self.fadeIn(color, i);
                }
                resolve(self);
            }, self.delay);
        });
    }
}


var lights = new Lights(50);

lights.fadeIn("blue", 0).then(
    lights.fadeOut("blue", 255)
);

Here is a jsFiddle of the code.

The idea behind the code is to set the blue color from 0 to 255 and Then from 255 to 0. How can I do this ?

Answer 1

You are making recursive calls so on the last call what you resolve is not the resolve in your first promise that you call then on so you could store that first resolve in one property in your class and then call it.

 class Lights { constructor(delay) { this.blue = 0; this.green = 0; this.red = 0; this.delay = delay; this.fadeInResolve = null; this.fadeOutResolve = null; } fadeIn(color, i) { return new Promise((resolve, reject) => { if (!this.fadeInResolve) { this.fadeInResolve = resolve } setTimeout(() => { this[color] = i; console.log(this[color]); i += 5; if (i <= 255) this.fadeIn(color, i); else this.fadeInResolve(this) }, this.delay); }); } fadeOut(color, i) { return new Promise((resolve, reject) => { if (!this.fadeOutResolve) { this.fadeOutResolve = resolve } setTimeout(() => { this[color] = i; console.log(this[color]); i -= 5; if (i >= 0) this.fadeOut(color, i); else this.fadeOutResolve(this) }, this.delay); }); } } var lights = new Lights(50); lights.fadeIn("blue", 0).then(() => { console.log('Fade in done') lights.fadeOut("blue", 255).then(() => { console.log('Fade out done') }) }); 

Answer 2

Promise.prototype.then() should take a callback function and the recursion is not waiting. Consider this code which can be used to do the same thing:

 //promisify :) function timer(delay) { return new Promise(function (resolve, reject) { setTimeout(function () { resolve(); }, delay); }); } class _Modulator { constructor(_resolution = 255, _delay = 5) { /* assert resolution and delay > 0; */ this._resolution = _resolution; this._delay = _delay; this._counter = 0; this._running = false; } start() { console.log("timer start"); this._running = true; this._start(); } _start() { return timer(this._delay).then(() => { if (this._running === true) { this._counter += 1; console.log("tick"); this._onTick(); /* care should be taken to ensure this will always catch, eg, * correcting init */ if (this._counter === this._resolution) { this._counter = 0; this._onCycle(); } this._start(); } }); } stop() { this._running = false; console.log("timer stopped"); } _onTick() { console.log("tick handle: %s", this._counter); } _onCycle() { console.log("new cycle"); } } class UpDownModulator extends _Modulator { constructor(_resolution = 255, _delay = 5) { super(_resolution, _delay); this._dir = 1; } _onTick() { console.log("tick handle: %s", this.getCounter()); } _onCycle() { this._toggleDirection(); console.log("new cycle: going %s", this.getDirection()); } _toggleDirection() { this._dir ^= 1; } getCounter() { return this._dir ? this._counter : this._resolution - this._counter; } getDirection() { return this._dir ? "up" : "down"; } } let c = new UpDownModulator(); c.start(); 

You can create a ColorFader class that depends on a Modulator and observe it. This creates clean abstractions that adhere to SRP.

I hope this helps!