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 comment.
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 complete code can be found here or here.
I'm not familiar with JavaScript Promises, but presuming that you want await myButton.on("click") to complete 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 completer = Completer<void>();
void handler(Event event) {
removeEventListener(name, handler);
completer.complete();
}
addEventListener(name, handler);
return completer.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>