在 Dart 中是否有等效於 Javascript 的 `resolve` function（來自 Promise 構造函數）？

Question

我想創建一個返回未來的 function。 一個值將在特定時間被解析。 但是，必須從回調內部解析該值。 在 Javascript 中，我可以這樣做：

function delay(seconds) {
  return new Promise((resolve, reject) => {
    setTimeout(resolve, seconds * 1000);
  });
}

我在 Dart 中沒有看到任何明確的解決方案，任何人都可以告訴我一個方法來做到這一點（或解決這個問題的方法）嗎？ 如果您需要任何說明，請隨時發表評論。

編輯：為了更清楚，我將提供我創建的上下文和源代碼。

我正在嘗試制作一個 function （實際上是方法），它在元素發生單個事件后返回。 我第一次寫在 Javascript -

HTMLElement.prototype.on = function(eventName) {
    return new Promise(function(resolve, reject) {
        var handler = function(event) {
            resolve(null);
            this.removeEventListener(eventName, handler);
        };
        this.addEventListener(eventName, handler);
    });
};

你可以這樣使用它： await myButton.on("click"); alert("Button clicked first time"); await myButton.on("click"); alert("Button clicked first time"); .

為了玩玩，我試圖在 Dart + HTML 中重新創建它，這是到目前為止的代碼。

import "dart:html";

extension on HtmlElement {
  on(String name) {
    void handler(Event event) {
      removeEventListener(name, handler);
      // Do something to actually return from the method...
    }

    addEventListener(name, handler);
  }
}

void main() {}

編輯：出於好奇，可以在此處或此處找到完整代碼。

Answer 1

我不熟悉 JavaScript Promise s，但假設您希望await myButton.on("click")僅在handler function 至少執行一次后才完成，您可以使用Completer ：

import "dart:async";
import "dart:html";

extension on HtmlElement {
  Future<void> on(String name) {
    final completer = Completer<void>();

    void handler(Event event) {
      removeEventListener(name, handler);
      completer.complete();
    }

    addEventListener(name, handler);
    return completer.future;
  }
}

Answer 2

Promise 最多可以解析一次，因此在第一次單擊后自動刪除事件偵聽器可能是有意義的。 而不是修改HtmlElement.prototype這是一種不衛生的做法，而是編寫一個簡單的onclick function 接受 HtmlElement 作為輸入 -

 function onclick(elem) { return new Promise(r => elem.addEventListener("click", r, {once: true}) ) } function main () { onclick(document.forms.myapp.mybutton).then(event => console.log(event.target)) onclick(document.forms.myapp.otherbutton).then(event => console.log(event.target)) } main()

 <form id="myapp"> <button type="button" name="mybutton">A</button> <button type="button" name="otherbutton">B</button> </form>