I want to create a function that returns a future. A value will be resolved at a specific time. However, the value will have to be resolved from inside a callback. In Javascript, I could do something like this:

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

I don't see any clear solution for this in Dart, could anyone show me a way to do this (or a way around this)? If you need any clarification, feel free to ask a ment.

Edit: to be more clear, I'll provide context and source code I've created.

I am trying to make a function (method, really) that returns after a single event happening to an element. I first wrote it in 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);
    });
};

and you can use it like this: await myButton.on("click"); alert("Button clicked first time");.

I'm trying to recreate it in Dart + HTML for the sake of toying around, and here's the code so far.

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

Edit: for the curious, the plete code can be found here or here.

I want to create a function that returns a future. A value will be resolved at a specific time. However, the value will have to be resolved from inside a callback. In Javascript, I could do something like this:

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

I don't see any clear solution for this in Dart, could anyone show me a way to do this (or a way around this)? If you need any clarification, feel free to ask a ment.

Edit: to be more clear, I'll provide context and source code I've created.

I am trying to make a function (method, really) that returns after a single event happening to an element. I first wrote it in 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);
    });
};

and you can use it like this: await myButton.on("click"); alert("Button clicked first time");.

I'm trying to recreate it in Dart + HTML for the sake of toying around, and here's the code so far.

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

Edit: for the curious, the plete code can be found here or here.

• javascript
• dart
• asynchronous
• dom
• promise

Share Improve this question Follow edited Oct 6, 2021 at 15:24 gosoccerboy5 asked Oct 3, 2021 at 20:17 gosoccerboy5gosoccerboy5 13422 silver badges1010 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 11

I'm not familiar with JavaScript Promises, but presuming that you want await myButton.on("click") to plete only after the handler function has executed at least once, you can use a Completer:

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

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

    void handler(Event event) {
      removeEventListener(name, handler);
      pleter.plete();
    }

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

A Promise can be resolved a maximum of one time, so it probably makes sense to automatically remove the event listener after the first click. And instead of modifying the HtmlElement.prototype which is an unhygienic practice, write a simple onclick function that accepts an HtmlElement as input -

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>