What is anti-shake throttling?
Function anti-shake (debounce):
It means that within a certain period of time, when the action is triggered continuously and frequently, the action will only be executed once, that is to say, the action will be executed after n milliseconds after the action is called, (such as scrolling events, repeated submission of forms , Page resize event, which is common when page adaptation is required), allows the event processing function to be executed only once within a certain period of time.
Function throttle:
It means that the operation executed within a certain period of time is only executed once, that is to say, an execution cycle is set in advance. When the time when the action is called is greater than or equal to the execution cycle, the action will be executed, and then enter the next new cycle. For a large number of triggers in a short period of time The same event (such as scrolling event, real-time search in the input box), then after the function is executed once, the function will no longer work within the specified time period, and it will not take effect again until this period of time passes.
Why use anti-shake throttling?
Function throttling (throttle) and function debounce (debounce) are both to limit the execution frequency of the function to optimize the response speed caused by the high trigger frequency of the function that cannot keep up with the trigger frequency, resulting in delay, suspended animation or freeze phenomenon.
How to use anti-shake throttling?
(1) Create a new file, for example, create a new common.js file under utils
//防抖
export const Debounce = function (fn, t) {
let delay = t || 200;
let timer = null;
return function () {
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(() => {
fn.apply(this, arguments);
}, delay);
}
}
//节流
export const Throttle = function (fn, delay = 200) {
let canRun = true; // 通过闭包保存一个标记
return function () {
if (!canRun) return;//在delay时间内，直接返回，不执行fn
canRun = false;
setTimeout(() => {
fn.apply(this, arguments);
canRun = true;//直到执行完fn,也就是delay时间后，打开开关，可以执行下一个fn
}, delay);
};
}(2) Introduce anti-shake throttling on the pages that need to be used
import {Debounce,Throttle} from '@/utils/common';//引入防抖和节流
//路径需根据文件所在的位置，进行修改(3) In the place where it needs to be used (for example, on some buttons), on the click event of the button, the method of binding the anti-shake or throttling event
<el-form-item>
<el-button type="primary" @click="toFilterData()">查询</el-button>
<el-button type="info" @click="reset()">重置</el-button>
</el-form-item>methods: {
//查询按钮---防抖
//toFilterData当前点击事件
//Debounce点击事件绑定防抖的方法
toFilterData:Debounce(function(val) { //调用防抖
console.log('不管你怎么点击，我只在2s后触发事件，2s内点击我也要等到2s后再触发事件')
this.getTabletsIndex();//列表接口
},2000),
//查询按钮---节流
//toFilterData当前点击事件
//Throttle点击事件绑定节流的方法
toFilterData:Throttle(function(val) { //调用节流
console.log('第一次请求马上触发，往后不管你怎么触发，我只在2s后请求,2s内触发我要重 新计算时间的')
this.getTabletsIndex();//列表接口
},2000),
}(4) The effect is as follows:
