Question

我正在构建一个JS应用程序，其中使用了多个计时器（数字，模拟）。我想将Timer的基类与以下功能一起使用：启动，停止，更新等。

每次创建一个计时器时，都会创建一个新的onChange事件。因此，当计时器打钩时，多个实例将获得更新，而不仅仅是在其中创建计时器的一个实例。

我的问题是：如何绑定另一个实例并Timer实例？

计时器类别：

class Timer = {

    constructor() {
        this.seconds = 0;
    }

    start() {
        this.timer = setInterval(update, 25);
    }

    stop() {
        clearInterval(this.timer);
    }

    update() {

        this.seconds += 1;

        //emit data
        let event = new Event("timer-tick");
        event.detail = {
            seconds: seconds,
        }

        document.body.dispatchEvent(event);
    }
}

DigitalTimer类：

class DigitalTimer = {

    constructor() {
        this.timer = new Timer();
        this.handleEvent();
    }

    handleEvent() {

        $('body').on('timer-tick', function(e) {
            //tick, do somehting with it.
        });
    }

    start() {
        this.timer.start();
    }

    stop() {
        this.timer.stop()
    }
}

Answer 1

我确实通过将on和trigger事件绑定到一个普通对象上来使其工作了。 http://api.jquery.com/jQuery/#working-with-plain-objects

工作示例： https://jsfiddle.net/q5s6cud3/

class Timer {

  constructor() {

    let self = this;

    this.timer = setInterval(function() {
        self.update();
    }, 1000);   
  }

  update() {

     $(this).trigger('timer-tick');
    }
}

class DigitalTimer {

  constructor() {

    this.timer = new Timer();

    $(this.timer).on('timer-tick', function() {
        console.log('yes'); 
    });
  }
}

const digitalTImer = new DigitalTimer();

Answer 2

函数原型上有一个bind方法可以满足您的需求。

start() {
    this.timer = setInterval(this.update.bind(this), 25);
}

请注意，您不应该依赖setInterval或setTimeout来增加时间。当然，它们对于进行定期呼叫很有用，但是无法保证经过的时间。您可以在每次调用时将一个初始Date对象与一个新对象进行比较。

将类绑定到另一个类的实例

2 个答案: