CODEWITHSUNDEEP
javascriptjquery
roapp
roapp

Reputation: 746

Bind class to an instance of another class

I'm building an JS application where I'm using multiple timers (digital, analog). I would like to use a base class for the Timer with the functions: start, stop, update, etc.

Every time there is a timer created there are also new onChange event created. So when the timer ticks multiple instances get an update, not only the one where the timer is created in.

My question is: how can I bind and Timer instance the another class?

Timer class:

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:

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()
    }
}

Upvotes: 2

Views: 783

Answers (2)

roapp
roapp

Reputation: 746

I did get it working by binding an on and trigger event on a plain object. http://api.jquery.com/jQuery/#working-with-plain-objects

Working sample: 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();

Upvotes: 0

challet
challet

Reputation: 972

There is a bind method on the Function prototype that does what you want.

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

On a side note, you shouldn't rely on setInterval or setTimeout to increment the time. Of course they are useful to make periodic calls, but the elapsed time isn't guaranteed. You can instead compare an initial Date object with a new one on each call.

Upvotes: 1

Related Questions