1. Start with words
Throttle (throttleTime) (hold the neck of time = throttling)
anti-shake (debounceTime)
2. The main film begins
2.1 Analogy explanation
Cost-saving: For example, today's 9-10 o'clock Moutai competition, it is expected that 5,000 people signed up to compete for Moutai, but at 9:30, another 4,000 people came in and signed up to compete for Moutai. But no matter how many people are added , only one person will be selected as today's lucky one at 10 o'clock .
After this wave ends, in the next wave of rush sales from 10 to 11 o'clock, registration will start from 0 people. Similar to the previous wave, no matter how many people sign up within this 1 hour, only one person will be drawn at 11 o'clock.
Another example of cost-saving is:
① In an exam with 10,000 people crossing a single-plank bridge, 1,000 people apply for the exam and only one person
is admitted. ② A company has 20 interviewers in a month, but only one person can be admitted in the end.
Anti-shake: For example, today's 9-10 o'clock Moutai competition, it is expected that 5,000 people signed up to compete for Moutai, but at 9:30, another 4,000 people came in and signed up to compete for Moutai. At this time, the official changed the rush-buying time to 9:30-10:30 . , but at 9:50, another 1,000 people came in and signed up to grab Maotai. At this time, the official changed the rush buying time to 9:50-10:50 . In the end, only one person will be selected as today's lucky winner at 10:50.
Another example of anti-shake:
① Quit smoking. If you give yourself a goal of not smoking within 30 days, delete the library. After persisting for 1 day, I gave up and started counting the 30 days again. In this cycle, 30 days may actually become 365 days or 3650 days or 36500 days (every time the smoking is interrupted for 30 days, the calculation is jitter)
② Setting the flag periodically, but often not realizing it
③ Manually filling in some paper information Sometimes, because one of the items is written incorrectly, you have to write it again.
④ The issue of social security years in the lottery. If the social security relationship is severed, you have to start calculating the social security payment years again.
Throttle, throttling, throttling is the flow of time intervals . (You can think of the thickness of faucet water. A long time interval = thick water flow, and a short time interval = thin water flow.) (The
situation corresponding to throttling is: the situation where the value changes multiple times within a period of time, which solves the frequent problem)
( Throttling Each cycle of the flow directly does not affect each other )
Anti-shake, anti-shake, if it shakes for a period of time, anti-shake again . Only when there is no jitter for a period of time will the subsequent function be triggered
(the corresponding situation of anti-shake is: the problem of not changing the value for a period of time, which solves the problem of accumulation , not changing the value = accumulating null values)
( the current period of anti-shake may affect the next cycle )
2.2 show code
2.2.1 Throttling
import {
Component } from '@angular/core';
import {
Observable } from 'rxjs';
import {
debounceTime, throttleTime } from 'rxjs/operators';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
constructor() {
}
aa: any;
bb: any;
ngOnInit() {
this.aa = new Observable(oberser => {
this.bb = oberser;
});
this.aa.pipe(throttleTime(2000)).subscribe((res: any) => {
console.log('3');
// 1649573823646 (1649573823646 - 1649573823641 = 5)
// 距离早上吃啥过去了0秒
// 1649573826653 (1649573826653 - 1649573823641 = 3012)
// 距离早上吃啥过去了0秒
console.log(new Date().getTime());
console.log(res);
});
console.log('首次加载');
// 1649573823641
console.log(new Date().getTime());
this.bb.next('早上吃啥');
setTimeout(() => {
console.log('1');
// 1649573824648 (1649573824648 - 1649573823641 = 1007)
// 距离早上吃啥过去了1秒
console.log(new Date().getTime());
this.bb.next('中午吃啥');
}, 1000);
setTimeout(() => {
console.log('2');
// 1649573826649 (1649573826649 - 1649573823641 = 3008)
// 距离早上吃啥过去了3秒
console.log(new Date().getTime());
this.bb.next('晚上吃啥');
}, 3000);
}
}
2.2.2 Anti-shake
Why did it finally become 5s? Because it changed again at the 3rd second, so I re-anti-shake for 2s.
import {
Component } from '@angular/core';
import {
Observable } from 'rxjs';
import {
debounceTime, throttleTime } from 'rxjs/operators';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
constructor() {
}
aa: any;
bb: any;
ngOnInit() {
this.aa = new Observable(oberser => {
this.bb = oberser;
});
this.aa.pipe(debounceTime(2000)).subscribe((res: any) => {
console.log('3');
// 1649572216375 (1649572216375 - 1649572211345 = 5030)
// 距离早上吃啥过去了5秒
console.log(new Date().getTime());
console.log(res);
});
console.log('首次加载');
// 1649572211345
console.log(new Date().getTime());
this.bb.next('早上吃啥');
setTimeout(() => {
console.log('1');
// 1649572212348 (1649572212348 - 1649572211345 = 1003)
// 距离早上吃啥过去了1秒
console.log(new Date().getTime());
this.bb.next('中午吃啥');
}, 1000);
setTimeout(() => {
console.log('2');
// 1649572214373 (1649572214373 - 1649572211345 = 3028)
// 距离早上吃啥过去了3秒
console.log(new Date().getTime());
this.bb.next('晚上吃啥');
}, 3000);
}
}
Another example is that I hope to stabilize the shake for 2s, but it shakes at 1s, so I add another anti-shake for 2s on the basis of 1s, so it finally becomes 3s (1+2=3)
import {
Component } from '@angular/core';
import {
Observable } from 'rxjs';
import {
debounceTime, throttleTime } from 'rxjs/operators';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
constructor() {
}
aa: any;
bb: any;
ngOnInit() {
this.aa = new Observable(oberser => {
this.bb = oberser;
});
this.aa.pipe(debounceTime(2000)).subscribe((res: any) => {
console.log('3');
// 距离早上吃啥过去了3秒
console.log(new Date().getTime());
console.log(res);
});
console.log('首次加载');
console.log(new Date().getTime());
this.bb.next('早上吃啥');
setTimeout(() => {
console.log('1');
// 距离早上吃啥过去了1秒
console.log(new Date().getTime());
this.bb.next('中午吃啥');
}, 1000);
}
}
