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: ''
   })
   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-exa服务器托管网mple',
     template: '
   '
   })
   export class ThrottleExampleComponent {
     onScroll(event: Event) {
       fromEvent(event.target, 'scroll')
         .pipe(
           throttleTime(300)
         )
         .subscribe(() => {
           // 执行滚动操作
         });
     }
   }
    
   使用Angular自带的工具实现防抖和节流：
    
   防抖（Debounce）：
    
   import { Compone服务器托管网nt } from '@angular/core';
   
   @Component({
     selector: 'app-debounce-example',
     template: ''
   })
   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: '
   '
   })
   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);
       };
     }
   }
   
                   
           
   
   
     $(function() {
   
       setTimeout(function () {
   
         var mathcodeList = document.querySelectorAll('.htmledit_views img.mathcode');
   
         if (mathcodeList.length > 0) {
   
           for (let i = 0; i < mathcodeList.length; i++) {
   
             if (mathcodeList[i].naturalWidth === 0 || mathcodeList[i].naturalHeight === 0) {
   
               var alt = mathcodeList[i].alt;
   
               alt = '(' + alt + ')';
   
               var curSpan = $('');
   
               curSpan.text(alt);
   
               $(mathcodeList[i]).before(curSpan);
   
               $(mathcodeList[i]).remove();
   
             }
   
           }
   
           MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
   
         }
   
       }, 1000)
   
     });
   
   

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net

相关推荐: Nacos安装，服务注册，负载均衡配置，权重配置以及环境隔离

1. 安装 首先从官网下载nacos 安装包，注意是下载 nacos-server Nacos官网 | Nacos 官方社区 | Nacos 下载 | Nacos 下载完毕后，解压找到文件夹bin，文本打开startup.cmd 修改配置如下 然后双击 sta…