Angular实现防抖和节流的示例代码

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

使用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(() => {
// 执行滚动操作
});
}
}

使用Angular自带的工具实现防抖和节流：
防抖（Debounce）：

import { Component } from \’@angular/core\’;

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\’;

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);
};
}
}

以上就是Angular实现防抖和节流的示例代码的详细内容，更多关于Angular防抖和节流的资料请关注悠久资源网其它相关文章！

您可能感兴趣的文章: