RxJS 实现搜索功能的小例子

const Observable = Rx.Observable
const input = document.querySelector('input')

const search$ = Observable.fromEvent(input, 'input')
    .map(e => e.target.value)
    .filter(value => value.length >= 1)
    // .throttleTime(200) // 节流事件,指的是该事件最多每几秒触发一次
    .debounceTime(200) //去抖动时间,指的是必须等待的时间
    .distinctUntilChanged()// 当我们观察的数据状态发生改变的时候才会释放数据
    .switchMap(term => Observable.fromPromise(wikiIt(term)))
    .subscribe(
        x => render(x),
        err => console.error(err)
    )

function render(result) {
    document.querySelector('#result').innerHTML = result[1]
        .map(r => `
  • ${r}
  • `) .join('') } function wikiIt(term) { console.log('request...') var url = 'https://en.wikipedia.org/w/api.php?action=opensearch&format=json&search=' + encodeURIComponent(term) + '&origin=*'; return $.getJSON(url) }

    你可能感兴趣的:(RxJS 实现搜索功能的小例子)