Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
const myInput = document.getElementById('myInput');
//1 - input
//2 - fetch
//3 - debounce
//Why not Promise?
/*
//---------------------1------------------------
function createEventPromise() {
let listener: (event:KeyboardEvent) => void;
let p = new Promise((resolve) => {
listener = (event) => {
resolve(event);
}
myInput.addEventListener('input', listener);
});
return p.then((event: KeyboardEvent) => {
console.log((event.target as HTMLInputElement).value);
myInput.removeEventListener('input', listener);
createEventPromise();
});
}
createEventPromise();
*/
//---------------------2------------------------
declare function fetch(url: string) : PromiseLike<any>;
function createEventPromise() {
let listener: (event:KeyboardEvent) => void;
let p = new Promise((resolve) => {
listener = (event) => {
resolve(event);
}
myInput.addEventListener('input', listener);
});
return p.then((event: KeyboardEvent) => {
//console.log((event.target as HTMLInputElement).value);
fetch(`https://api.github.com/search/repositories?q=${(event.target as HTMLInputElement).value}`).then(response => response.json()).then((repos) => {
console.log(repos);
});
myInput.removeEventListener('input', listener);
createEventPromise();
});
}
createEventPromise();
/*
declare var Rx;
let o = Rx.Observable.fromEvent(myInput, 'input');
o.subscribe((event:KeyboardEvent) => {
console.log((event.target as HTMLInputElement).value);
});
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.