Javascript обещают тогда внутри класса

Question

Я пытаюсь понять, как работают Обещания, и я не могу заставить свой кусок кода работать.

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)
);

Вот jsFiddle кода.

Идея кода заключается в том, чтобы установить синий цвет от 0 до 255 и Then от 255 до 0. Как я могу это сделать?

Answer 1

Promise.prototype.then() должен принять функцию обратного вызова, и рекурсия не ожидает.Рассмотрим этот код, который можно использовать для того же:

//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, e.g., 
                 * 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();

Вы можете создать класс ColorFader, который зависит от модулятора, и наблюдать за ним.Это создает чистые абстракции, которые придерживаются SRP.

Надеюсь, это поможет!

Answer 2

Вы делаете рекурсивные вызовы, поэтому при последнем вызове вы не решаете в своем первом обещании, что вы вызываете then, чтобы вы могли сохранить это первое разрешение в одном свойстве вашего класса, а затем вызвать его.

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')
  })
});