快捷導(dǎo)航

Angular實(shí)現(xiàn)防抖和節(jié)流的示例代碼

更新時(shí)間：2024年02月20日 09:10:53 作者：crary,記憶

這篇博客主要是詳細(xì)介紹兩種常用Angular實(shí)現(xiàn)防抖和節(jié)流的方法：使用RxJS操作符和使用Angular自帶的工具,文中通過(guò)代碼示例給大家講解的非常詳細(xì),需要的朋友可以參考下

在Angular中實(shí)現(xiàn)防抖和節(jié)流的方法有多種，這篇博客主要是詳細(xì)介紹兩種常用的方法：使用RxJS操作符和使用Angular自帶的工具。

使用RxJS操作符實(shí)現(xiàn)防抖和節(jié)流：
防抖（Debounce）：

//簡(jiǎn)易版
import { debounceTime } from 'rxjs/operators';
input.valueChanges.pipe(
  debounceTime(300)
).subscribe(value => {
  // 執(zhí)行搜索操作
});
 
 
//詳細(xì)版
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(() => {
        // 執(zhí)行輸入框搜索操作
      });
  }
}

節(jié)流（Throttle）：

//簡(jiǎn)易版
import { throttleTime } from 'rxjs/operators';
scrollEvent.pipe(
  throttleTime(300)
).subscribe(() => {
  // 執(zhí)行滾動(dòng)操作
});
 
//詳細(xì)版
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(() => {
        // 執(zhí)行滾動(dòng)操作
      });
  }
}

使用Angular自帶的工具實(shí)現(xiàn)防抖和節(jié)流：
防抖（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(() => {
    // 執(zhí)行輸入框搜索操作
  }, 300);
 
  debounce(func, delay) {
    let timer;
    return function() {
      clearTimeout(timer);
      timer = setTimeout(() => {
        func.apply(this, arguments);
      }, delay);
    };
  }
}

節(jié)流（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(() => {
    // 執(zhí)行滾動(dòng)操作
  }, 300);
 
  throttle(func, delay) {
    let canRun = true;
    return function() {
      if (!canRun) return;
      canRun = false;
      setTimeout(() => {
        func.apply(this, arguments);
        canRun = true;
      }, delay);
    };
  }
}

以上就是Angular實(shí)現(xiàn)防抖和節(jié)流的示例代碼的詳細(xì)內(nèi)容，更多關(guān)于Angular防抖和節(jié)流的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: