节流
什么是节流:在规定的时间内只执行一次,就是节流。
应用场景:快速点击按钮时短时间内重复发送请求问题
对于按钮点击事件,快速频次的点击,需求是在间隔相同时间内只会请求一次数据。
简易实现:
// 按钮点击事件 valid为全局变量 默认为true buttonClick() { if(!this.valid) { // 首次点击不会return, return; } // 首次点击之后全局变量置为false,同时向下执行,setTimeout推入待执行队列 this.valid = false; this.timer = setTimeout(() => { console.log('按钮点击'); this.valid = true; // 在定时器未执行前,valid为false,所以点击方法会直接return },1000) },
节流函数:
/** * 节流,当持续触发事件时,在规定时间段内只能调用一次回调函数 */ export function Throttle(func, delay) { let inThrottle; return function() { const args = arguments; const context = this; if (!inThrottle) { func.apply(context, args); inThrottle = true; setTimeout(() => (inThrottle = false), delay); } }; }
防抖
防抖就是无论你将事件触发多少次,总是在最后一次触发事件多少时间之后执行。
换个方式说就是:在短时间内大量触发同一函数,只会执行一次函数(防止抖动)。
应用场景如:输入框input事件触发多次请求接口,页面滚动对应相应计算逻辑多次执行
简单实现:
// input事件 async userNameserch(val) { let self = this; let res; clearTimeout(this.timer); this.timer = setTimeout(async () => { res = await ImApi.searchAllByName({ param: self.superviseUserNameserchValue, }); if (res.code == 200 || res.state == "ok") { self.serchObj = res.data; } }, 500); },
防抖函数:
/** * 防抖,指触发事件后在规定时间内回调函数只能执行一次, * 如果在规定时间内又触发了该事件,则会重新开始算规定时间 */ export default function Debounce(fn,delay = 500) { let timer return function() { const th = this const args = arguments if (timer) { clearTimeout(timer) } timer = setTimeout(function() { timer = null fn.apply(th, args) }, delay) } }