concept
1. Anti-shake
Anti-shake strategy (debounce): After the event is triggered, the callback function will be executed after a delay of n seconds. If the event is triggered again within this n seconds, the timing will be restarted.
The advantage is: it can ensure that when the user frequently triggers certain events, the callback will not be executed frequently, and will only be executed once.
The concept of anti-shake: If someone enters the elevator (triggers the event), the elevator will leave after 10 seconds (execute the event listener), and if someone enters the elevator again (triggers the event again within 10 seconds), we Have to wait another 10 seconds before starting (re-time).
Anti-shake application scenarios::
When the user continuously enters a string of characters in the input box, the anti-shake strategy can be used to execute the query request only after the input is completed, which can effectively reduce the number of requests and save request resources.
2. Throttle strategy
Throttle strategy (throttle): , which can reduce the trigger frequency of events for a period of time.
Throttle concept:
Whether the bathroom of the high-speed rail is occupied is controlled by traffic lights. Assuming that it takes five minutes for each person to go to the bathroom, others cannot use it within five minutes. After the previous one is used, set the red light to green to indicate that the next person can use it Yes. The next person needs to judge whether the control light is green when using the restroom to know whether the restroom is available.
– If the throttle valve is empty, it means that the next operation can be performed. If it is not empty, it means that the next operation cannot be used. –
After the current operation is completed, the throttle valve should be reset to empty, which means that the next operation can be performed.
– Before each operation is performed, first determine whether the throttle valve is empty
Application scenarios of throttling policy:
1) When the mouse continuously triggers an event, such as clicking, it is only triggered once in the unit event.
2) When lazy loading, it is necessary to monitor and calculate the position of the scroll bar, but it is not necessary to trigger every sliding, which can reduce the calculation frequency and is unnecessary Waste CPU resources.
Use in VUE
Create a new throttleDebounce.js file in the project
export default {
// 防抖
debounce: function (fn, t) {
let delay = t || 500;
let timer;
return function () {
let th = this;
let args = arguments;
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(function () {
timer = null;
fn.apply(th, args);
}, delay);
}
},
// 节流
throttle: function (fn, t) {
let last;
let timer;
let interval = t || 500;
return function () {
let th = this;
let args = arguments;
let now = +new Date();
if (last && now - last < interval) {
clearTimeout(timer);
timer = setTimeout(function () {
last = now;
fn.apply(th, args);
}, interval);
} else {
last = now;
fn.apply(th, args);
}
}
}
}
FileConvert.vue file
import
import throttleDebounce from '@/utils/throttleDebounce.js'
// convertRes 是el-button绑定的点击事件
methods:{
convertRes: throttleDebounce.throttle(function() {
// 需要节流的事件，我这里是接口的调取
this.convertResFinal()
}, 500),
// 节流的事件
convertResFinal() {
this.$refs['form'].validate(async valid => {
if (valid) {
this.hexBtnLoading = true
const params = {
arch: this.form.arch,
addr: this.form.addr,
hexdump: this.form.hexdump
}
try {
const res = await getVexConvertRes(params)
if (res.code === 200) {
}
} catch (error) {
}
}
})
},
}