kuanhsuh
9/24/2017 - 11:14 PM

rxjs

rxjs

//Lecture 1
// var button = document.querySelector('button')
//button.addEventListener('click', () => {
//   console.log(event)
// })

// Rx.Observable.fromEvent(button, 'click')
//   .throttleTime(1000)
//   .map((data) => {return data.clientY})
//   .subscribe(
//     (coordinate) => console.log(coordinate)
//   )

//Lecture 2
// var observer = {
//   next: function(value) {
//     console.log(value)
//   },
//   error: function(error) {
//     console.log(error)
//   },
//   complete: function() {
//     console.log('Completed')
//   }
// }
// Rx.Observable.fromEvent(button, 'click')
// var subscription = Rx.Observable.create(function(obs){
//   obs.next('A Value')
//   obs.error('Error')
//   setTimeout(function(){
//     obs.complete()
//     obs.next('A second value')
//   }, 2000)
//   button.onclick = function(event){
//     obs.next(event.clientX)
//   }
// })
//   .subscribe(observer)

// setTimeout(function() {
//   subscription.unsubscribe()
// }, 2000


// Lecture 3
// var observable = Rx.Observable.interval(1000)

// var observer = {
//   next: function(value) {
//     console.log(value)
//   }
// }

// observable.map(function(value) {
//   return value * 2;
// }).throttleTime(2000)
//   .subscribe(observer)

// Lecture 4

// var subject = new Rx.Subject()

// subject.subscribe({
//   next: function(value) {
//     console.log(value)
//   }
// })

// subject.next('a new data')

// Lecture 5


// var observable = Rx.Observable.interval(1000)

// observable
//   .filter(function(value){
//     return value % 2 === 0
//   }).subscribe({
//   next: function(value){
//     console.log(value)
//   },
//   error: function(error){
//     console.log('error: ', error)
//   }
// })

//Lecture 6

//var input = document.querySelector('input')

//var observable = Rx.Observable.fromEvent(input, 'input')

//observable
//  .map(event => event.target.value)
//  .debounceTime(500)
//  .distinctUntilChanged()
//  .subscribe({
//    next: function(event) {
//      console.log(event)
//    }
//})

//Lecture 7

//var observable = Rx.Observable.of(1,2,3,4,5)

//observable
//	.scan((total, currentValue) => {
//  	return total + currentValue;
//  }, 0)
//	.subscribe({
//  	next: function(value) {
//    	console.log(value)
//    }
//  })

// Lecture 8

//var input = document.querySelector('input')
//var observable = Rx.Observable.fromEvent(input, 'input')

//observable
//	.pluck('target', 'value')
//	.debounceTime(500)
//  .distinctUntilChanged()
//	.subscribe({
//  	next: function(value) {
//    	console.log(value)
//    }
//  })

//Lecture 9

//var input1 = document.querySelector('#input1')
//var input2 = document.querySelector('#input2')

//var span = document.querySelector('span')

//var obs1 = Rx.Observable.fromEvent(input1, 'input') 
//var obs2 = Rx.Observable.fromEvent(input2, 'input')

//obs1.mergeMap(
//	event1 => {
//  	return obs2.map(event2 => event1.target.value +  ' ' + event2.target.value)
//  }
//).subscribe(
//	combinedValue => span.textContent = combinedValue
//)

// Lecture 10

//var button = document.querySelector('button')

//var obs1 = Rx.Observable.fromEvent(button, 'click')
//var obs2 = Rx.Observable.interval(1000)

//obs1.switchMap(
//	event => {
//  	return obs2
//  }
//).subscribe(
//	value => console.log(value)
//)


//Lecture 11
var clickEmitted = new Rx.Subject();
var button = document.querySelector('button')
var div = document.querySelector('div')

button.addEventListener('click', () => clickEmitted.next('Clicked'))

clickEmitted.subscribe(
	(value) => div.textContent = value
)

clickEmitted.next('Not Clicked')