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