JS - 在回調 function 內部調用 class 方法

Question

我目前遇到問題，不知道如何正確解決。

我正在使用WebMidi API 開發一個帶有 js 的 web 應用程序。

我想在加載 WebMidi 后將所有 midi 設備加載到下拉列表中。 據我了解，我必須通過 Webmidi 的啟用 function 回調 function：

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

我遇到的問題是我無法在回調 function 中引用 class 方法，但是一旦啟用 WebMidi，我必須調用用所有 midi 輸入填充下拉列表的方法。

我的代碼如下所示：

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!");
            } 
        });
    }
...

問題是在 WebMidi 完成激活之前調用了 fillDropdown()，並且當時數組是空的。 我可以在回調 function 中以某種方式引用 class 方法嗎？

Answer 1

WebMidi.enable是一個異步 function ，這意味着它允許您指定啟用WebMidi后要執行的操作。 問題是您沒有充分利用此功能。

想象一下，您是開槍開始比賽的人：您的代碼相當於開槍，然后將視線從比賽上移開，但仍想知道比賽何時結束。 如果你想在比賽結束后立即做某事，最好看看比賽，對吧？

現在，構造函數 function 啟動WebMidi.enable競賽並立即嘗試填充下拉列表。 這不是你想要的——你想在比賽結束時填寫下拉菜單。

要解決您的問題，請讓MidiListener.enable接受一個回調 function ，當WebMidi.enable完成且沒有錯誤時執行該回調。 這將允許您在WebMidi.enable完成時做一些正確的事情。

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

現在， this.fillDropdown只有在WebMidi啟動成功后才會執行。 通過上面的類比，構造函數 function 現在說“當WebMidi.enable比賽結束時填充下拉菜單”。

另外，請注意，我使用箭頭 function 來創建回調 function 。 這很重要，因為this關鍵字在與常規function關鍵字函數一起使用時，就像一個特殊的關鍵字。 this指的是什么取決於它的調用位置 - 在您的情況下，它位於WebMidi的代碼中。

為避免這種情況，請使用箭頭 function 將this視為具有常規范圍規則的常規變量。 還有其他解決方法 -這個答案很好地解釋了事情。