JS - Calling class methods inside of callback function

Question

I'm currently having a problem and don't know how to solve it correctly.

I'm developing a web application with js using the WebMidi API.

I want to load all midi devices into a dropdown after WebMidi is loaded. As far as I understood it I have to pass the enable function of Webmidi a callback function:

WebMidi.enable(function (err) {
  if (err) {
    console.log("WebMidi could not be enabled.", err);
  } else {
    console.log("WebMidi enabled!");
  }
});

The problem I am having is I cannot reference class methods inside the callback function, but I have to call the method that's fills the dropdown list with all midi inputs, as soon as WebMidi is enabled.

My code looks like this:

class MidiListener{
    constructor(){
        this.enable();
        this.fillDropdown(Webmidi.inputs);
    }


    enable(){
        WebMidi.enable(function (err) {
            //Enable WebMidi
            if (err) {
              console.log("WebMidi could not be enabled.", err);
              window.alert("WebMidi is not supported by your Browser.")
            } 
            else {
                console.log("WebMidi enabled!");
            } 
        });
    }
...

The problem is fillDropdown() is called before WebMidi finished activating, and the array is empty at the time. Can I somehow reference class methods inside the callback function?

Eldrax · Accepted Answer · 2021-01-31T17:38:07.397

WebMidi.enable is an asynchronous function, meaning it allows you to specify what to do once WebMidi is enabled. The problem is that you're not using this functionality to full power.

Imagine you're the guy who shoots the gun to start a race: your code is the equivalent of shooting and turning your eyes away from the race but still wanting to know when the race ends. If you want to do something right after the race ends, better look at the race, right?

Right now, the constructor function starts the WebMidi.enable race and immediately tries to fill the dropdown. That's not what you want - you want to fill the dropdown when the race ends.

To resolve your problem, make MidiListener.enable take a callback function that gets executed when WebMidi.enable is done without errors. This will allow you to do something right when WebMidi.enable finishes.

class MidiListener {
    constructor() {
        this.enable(() => {
            this.fillDropdown(WebMidi.inputs);
        });
    }

    enabledTest(err) {
        if(err) console.log("F");
        else console.log("Yeeee");
    }

    enable(callback) {
        WebMidi.enable(function (err) {
            //Enable WebMidi
            if (err) {
                // An error occured while starting WebMidi
                console.log("WebMidi could not be enabled.", err);
                window.alert("WebMidi is not supported by your Browser.")
            } 
            else {
                // WebMidi enabled successfully
                callback();
            } 
        });
    }

Now, this.fillDropdown will be executed only after WebMidi starts successfully. With the above analogy, the constructor function now says "fill the dropdowns when the WebMidi.enable race ends".

Also, note that I used an arrow function to create the callback function. This is important because the this keyword, when used with regular function-keyword functions, acts like a special keyword. What this refers to depends on where it's called - which in your case is somewhere in WebMidi's code.

To avoid that, use an arrow function which treats this like a regular variable with regular scoping rules. There are other workarounds too - this answer explains things very well.

Thanks you for taking the time. Unfortunatly it still throws the following error: midi-listener.js:4 Uncaught (in promise) TypeError: Cannot read property 'fillDropdown' of undefined at midi-listener.js:4 at WebMidi. (midi-listener.js:19) at WebMidi.onPortsOpen (webmidi@2.5.1:31) Any idea on why that doesn't work? — Nils, Jan 30 '21 at 18:29
Weird - are you sure you've added a `fillDropdown` method to your `MidiListener` class? — Eldrax, Jan 31 '21 at 11:14
Yes, but this was undefined inside the enabled function. It seems to work like this: `code this.enable((function (val) {function(){val.fillDropdown(WebMidi.inputs)}})(this) );` If you have any idea on how to do that in a more simple matter I'd be happy to hear it — Nils, Jan 31 '21 at 12:25
Got the issue! Since you're using old-style functions (with the `function` keyword), `this` does not behave like a regular variable and instead acts like a special keyword. So what `this` refers to depends on the context in which it's called. In this case, somewhere inside `WebMidi`'s internal code, it is read as `undefined`. To fix it, use an arrow function instead - works, tested in a sandbox. I'm updating the answer to include this. — Eldrax, Jan 31 '21 at 17:33

JS - Calling class methods inside of callback function

1 Answers1