防抖动(angular实现)_angular keyup防抖动

方法一：使用rxjs

import { Subject } from 'rxjs/Subject';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';

  public searchLLStream: Subject<string> = new Subject<string>();
  ngOnInit() {
    this.searchLLStream
      .debounceTime(2000) // 2000毫秒内不抖动
      .distinctUntilChanged()
      .subscribe(streetText => {
        this.getLocation();
      });
  }

this.searchLLStream.next(this.address.street); // 调用

方法二： 

  debounce(func, wait) {
    let timeout;
    return function() {
        // 操作this
        const context = this, args = arguments;
        const later = function() {
            timeout = null;
            func.apply(context, args);
        };
        // wait间隔内，多次调用则清除
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
    };
  }
  keyUp() {
      this.debounce(function() {
          // doSomeThing();
      }, 500);
  }

补充：节流函数，防抖动增加一段时间内必执行一次

    throttle(func, wait, mustRun) {
        let timeout,
            startTime = new Date();
        return function () {
            const context = this,
                args = arguments,
                curTime = new Date();
            clearTimeout(timeout);
            // 如果达到了规定的触发时间间隔，触发 handler
            if (curTime.getTime() - startTime.getTime() >= mustRun) {
                func.apply(context, args);
                startTime = curTime;
                // 没达到触发间隔，重新设定定时器
            } else {
                timeout = setTimeout(func, wait);
            }
        };
    }
    keyUp() {
        this.throttle(function () { }, 500, 1000);
    }