Angular中如何实现防抖和节流_angular防抖和节流的处理

        在Angular中实现防抖和节流的方法有多种，这篇博客主要是详细介绍两种常用的方法：使用RxJS操作符和使用Angular自带的工具。

1. 使用RxJS操作符实现防抖和节流：

    防抖（Debounce）：

   //简易版
   import { debounceTime } from 'rxjs/operators';
   input.valueChanges.pipe(
     debounceTime(300)
   ).subscribe(value => {
     // 执行搜索操作
   });
    
    
   //详细版
   import { Component } from '@angular/core';
   import { fromEvent } from 'rxjs';
   import { debounceTime } from 'rxjs/operators';
    
   @Component({
     selector: 'app-debounce-example',
     template: '<input (input)="onInput($event)">'
   })
   export class DebounceExampleComponent {
     onInput(event: Event) {
       fromEvent(event.target, 'input')
         .pipe(
           debounceTime(300)
         )
         .subscribe(() => {
           // 执行输入框搜索操作
         });
     }
   }
   

   节流（Throttle）：

   //简易版
   import { throttleTime } from 'rxjs/operators';
   scrollEvent.pipe(
     throttleTime(300)
   ).subscribe(() => {
     // 执行滚动操作
   });
    
   //详细版
   import { Component } from '@angular/core';
   import { fromEvent } from 'rxjs';
   import { throttleTime } from 'rxjs/operators';
    
   @Component({
     selector: 'app-throttle-example',
     template: '<div (scroll)="onScroll($event)">'
   })
   export class ThrottleExampleComponent {
     onScroll(event: Event) {
       fromEvent(event.target, 'scroll')
         .pipe(
           throttleTime(300)
         )
         .subscribe(() => {
           // 执行滚动操作
         });
     }
   }
   

2. 使用Angular自带的工具实现防抖和节流：

        防抖（Debounce）：

import { Component } from '@angular/core';
 
@Component({
  selector: 'app-debounce-example',
  template: '<input (input)="onInput($event)">'
})
export class DebounceExampleComponent {
  onInput(event: Event) {
    this.debounceSearch();
  }
 
  debounceSearch = this.debounce(() => {
    // 执行输入框搜索操作
  }, 300);
 
  debounce(func, delay) {
    let timer;
    return function() {
      clearTimeout(timer);
      timer = setTimeout(() => {
        func.apply(this, arguments);
      }, delay);
    };
  }
}

        节流（Throttle）：

import { Component } from '@angular/core';
 
@Component({
  selector: 'app-throttle-example',
  template: '<div (scroll)="onScroll($event)">'
})
export class ThrottleExampleComponent {
  onScroll(event: Event) {
    this.throttleScroll();
  }
 
  throttleScroll = this.throttle(() => {
    // 执行滚动操作
  }, 300);
 
  throttle(func, delay) {
    let canRun = true;
    return function() {
      if (!canRun) return;
      canRun = false;
      setTimeout(() => {
        func.apply(this, arguments);
        canRun = true;
      }, delay);
    };
  }
}