TypeScript Observable.fromEvent方法代码示例

    ngAfterViewInit():any {

        const container = this.containerElement.nativeElement;
        const draggable = this.draggableElement.nativeElement;

        const mouseDown$ = Observable.fromEvent(draggable, "mousedown");
        const mouseMove$ = Observable.fromEvent(container, "mousemove");
        const mouseUp$ = Observable.fromEvent(container, "mouseup");

        const drag$ = mouseDown$
            .map(() => mouseMove$
                .filter(event => boundaryCheck(event))
                .takeUntil(mouseUp$))
            .concatAll();

        drag$.subscribe( (event: MouseEvent) => {
                this.renderer.setElementStyle(draggable, 'left', event.clientX - (draggableWidth / 2) + "px");
                this.renderer.setElementStyle(draggable, 'top', event.clientY - (draggableHeight / 2) + "px");
            },
            error => console.log('error')
        );

        function boundaryCheck(event) {

            const leftBoundary = container.offsetLeft + (draggableWidth / 2);
            const rightBoundary = container.clientWidth + container.offsetLeft - (draggableWidth / 2);
            const topBoundary = container.offsetTop + (draggableHeight / 2);
            const bottomBoundary = container.clientWidth + container.offsetTop - (draggableHeight / 2);

            return event.clientX > leftBoundary &&
                event.clientX < rightBoundary &&
                event.clientY > topBoundary &&
                event.clientY < bottomBoundary;
        }
    }

    ngAfterViewInit() {
        const down = Observable.fromEvent(this.down.nativeElement, 'click')
        const up = Observable.fromEvent(this.up.nativeElement, 'click')

        this.counter = down
            .mapTo(-1)
            .merge(up.mapTo(1))
            .startWith(0)
            .scan<number>((prev, cur) => prev+cur, 0)

        down
            .buffer(down.debounceTime(250))
            .map(clicks => clicks.length)
            .filter(length => length == 2)
            .subscribe(
                (val) => console.log('doubleclick', val),
                (err) => console.error(err),
                () => console.log('complete')
            )

        // down
        //     .bufferTime(250)
        //     // .filter((clicks:any[]) => clicks.length > 1)
        //     .subscribe((val) => {
        //         console.log('buff', val);
        //     })
    }

  initSearchInput() {
    var keyups = Observable.fromEvent($("#search"), "keyup")
      .map(event => event.target.value)
      .filter(term => term.length > 2)
      .debounceTime(400)
      .distinctUntilChanged()
      .flatMap(this._spotifyService.searchArtists);

    var subscription = keyups.subscribe(result => console.log(result));
    // To unsubscribe from notifications:
    // subscription.unsubscribe();

    // var debounced = _.debounce(text => {
    //   var url = `https://api.spotify.com/v1/search?type=artist&q=${text}`;
    //   $.getJSON(url, artists => {
    //     console.log(artists);
    //   });
    // }, 400);
    //
    // $("#search").keyup(e => {
    //   var text = e.target.value;
    //   if (text.length < 3) return;
    //   debounced(text);
    // });
  }

 ngAfterViewInit() {
     
      var keyups = Observable.fromEvent($('#search'),'keyup')
      .map(e => (Object(Object(e).target)).value)
      .filter(text => text.length > 3)
      .debounceTime(400)
      .distinctUntilChanged()
      
      keyups.subscribe(data => console.log(data));
     
     // $("#search").keyup(function (e) {
     //     var text = e.target.value;
     //     var debounce = _.debounce(function (text) {
     //         var url = 'https://api.spotify.com/v1/search?type=artist&q=' + text;
     //         $.getJSON(url, function (artist) {
     //             console.log(artist);
     //         })
     //     }, 400)
     //     if (text.length < 3)
     //         return;
     //     debounce(text);
     // })
     
     
 }

  registerWatchingSubscriptionsAfterInitializeOnInit() {
    let previousTime: number;
    let previousKeyCode: number;

    // 次回ページ遷移入時にunsubscribeするsubscription群。
    this.service.SC.disposableSubscriptions = [
      // キーボード入力イベントをハンドリングする。Storeにデータを送る。
      Observable.fromEvent<KeyboardEvent>(document.querySelector('sg-page4 #keyinput'), 'keyup')
        // .do(event => console.log(event))
        .do(event => { // keyAが押されると処理開始。          
          if (!this.proccessing && event.keyCode === 65 /* keyA */) {
            previousTime = this.startTimer();
            previousKeyCode = 64;
          }
        })
        .do(event => { // 処理中のキー入力イベントをハンドリングする。
          if (this.proccessing) {
            const keyCode = event.keyCode;
            if (keyCode - previousKeyCode !== 1) {
              toastr.error('OOPS! TRY AGAIN.'); // alert('OOPS! TRY AGAIN.');
              this.stopTimer();
            } else {
              const now = lodash.now();
              const keyInput: KeyInput = {
                code: event['code'],
                keyCode: keyCode,
                filterId: this.filterId,
                diff: keyCode === 65 /* keyA */ ? 0 : now - previousTime
              };
              this.service.putKeyInput(keyInput).then(x => x.log('KeyInput')); // serviceを経由してStoreに値を送り、戻り値として得たStateをコンソールに出力する。
              previousTime = now;
              previousKeyCode = keyCode;
            }
          }
        })
        .do(event => { // keyZが押されると処理終了。
          if (this.proccessing && event.keyCode === 90 /* keyZ */) {
            this.stopTimer(true);
          }
        })
        .subscribe(() => this.cd.markForCheck()),

      // Storeからデータを受け取ってグラフを更新する。キーボード入力がトリガーとなりリアルタイムに更新される。
      this.state.keyInputs$
        .map(objs => objs.reverse()) // 降順を昇順に反転
        .do(objs => {
          if (objs.filter(obj => 'diff' in obj && 'code' in obj).length > 0) {
            const diffs = objs.map(obj => obj.diff / 1000); // diffの単位をミリ秒から秒に変換。
            const letters = objs.map(obj => obj.code.charAt(3)); // ex)'KeyA'から'A'を取り出す。
            this.chart.load({ // c3のグラフを更新する。
              columns: [
                ['diff_time', ...diffs]
              ],
              categories: letters,
            });
          }
        })
        .subscribe(),
    ];
  }

    constructor() {
        //Using Reactive Extensions and Observables
        var keyups = Observable.fromEvent($("#artistSearch"),"keyup")
            .map(e => e.target.value)
            .filter(text => text.length >= 3)
            .debounceTime(400)
            .distinctUntilChanged();
        
        keyups.subscribe(data => console.log(data));
        
        //Bad implementation (using jQuery:
        // var debounced = _.debounce(function (text) {
        //     var url = "https://api.spotify.com/v1/search?type=artist&q=" + text;
        //     $.getJSON(url, function (artists) {
        //         console.log(artists);
        //     });
        // }, 400);

        // $("search").keyup(function (e) {
        //     var text = e.target.value;
        //     if (text.length < 3)
        //         return;
        //     debounced(text);
        // });
    }

  ngOnInit() {
    const uid = this.store.currentUser.uid;

    /* URLからidを取得する */
    this.store.disposable = this.params$.pluck<string>('id')
      .do(noteid => {
        if (noteid) {
          /* 保存済みnoteを呼び出す */
          this.store.disposable = this.service.readNote$(noteid)
            .do(note => {
              this.note = note;
              this.oldNote = lodash.cloneDeep(this.note);
              this.cd.markForCheck();
            })
            .subscribe();
        } else {
          /* noteを新規作成 */
          this.note = this.service.createNote();
          this.oldNote = lodash.cloneDeep(this.note);
          this.cd.markForCheck();
        }
      })
      .subscribe();

    /* キー入力がある度にnoteを保存する */
    this.store.disposable = Observable.fromEvent<KeyboardEvent>(this.el.nativeElement, 'keyup')
      .debounceTime(1000)
      .do(() => {
        this.service.writeNote(this.note, this.oldNote);
      })
      .subscribe();
  }

    constructor() {
    
    //Observables version
    var keyups = Observable.fromEvent($("#search"),"keyup");
    //keyups.subscribe( data => console.log(data) );



         //callback hell version without observables
        /*var debounced = _.debounce(function (text) {
            var url = "https://api.spotify.com/v1/search?type=artist&q=" + text;
            $.getJSON(url, function (artists) {

                console.log(artists);


            })
        }, 400);

        $("#search").keyup(function (e: any) {
            var text = e.target.value;

            //check for input length
            if (text.length < 3)
                return;

            debounced(text);

        });*/
    }

 jQuery.getJSON(url, ()=> {
     var path = `https://${source}/Snapshots/business${businessId}/station${stationId}/${fileName}.jpg`;
     jQuery(this.elRef.nativeElement).find('.newImage').fadeOut(200);
     var img = this.renderer.createElement(this.elRef.nativeElement, 'img', null);
     jQuery(img).addClass('snap');
     var int$ = Observable.interval(500).do(()=> {
         img.src = path;
     })
     var $err = Observable.fromEvent(img, 'error').do(()=>{
         jQuery(this.elRef.nativeElement).find('.snap').remove();
     })
     var load$ = Observable.fromEvent(img, 'load')
     var subscription = Observable.merge(int$, $err).takeUntil(load$).delay(500).subscribe((res)=> {
         subscription.unsubscribe();
     })
 });

    constructor(){
        var keyups = Observable.fromEvent($("#search"), "keyup") // subscribe to keyups.
            .map(e => e.target.value) // map from DOM event to string
            .filter(s => s.length >= 3) // filter for only strings >= 3
            .debounceTime(400) // debounce for 400ms
            .distinctUntilChanged() // call only once per input.
            .flatMap(s => {
                var url = "https://api.spotify.com/v1/search?type=artist&q=" + s;
                var promise = $.getJSON(url); // get the promise from getJSON
                return Observable.fromPromise(promise); // subscribe to the promise
            }); // flatMap flattens our Observable of Observables
            // into an Observable which returns the data.
            // In production, the code inside flatMap should be refactored into a service class.

        var subscription = keyups.subscribe(data => console.log(data));
        // subscription.unsubscribe(); // to stop receiving events.

        // // Create a debouncer, so the max freq we call server is 400ms.
        // var debounced = _.debounce(function(text){
        //     var url = "https://api.spotify.com/v1/search?type=artist&q=" + text;
        //     $.getJSON(url, function(artists) {
        //         console.log(artists);
        //     });
        // }, 400);

        // $("#search").keyup(function(e){
        //     var text = e.target.value;

        //     // To not flood server.
        //     if(text.length < 3)
        //         return;

        //     debounced(text);
        // });
    }