函数的防抖
函数的防抖是在多少时间后再来执行函数,我们可以理解为这样的一种生活场景(坐升降电梯),
在点击电梯的开门按钮后,电梯会开门,然后等待一段时间来关门。但是如果在等待的期间,
有人再次点击开门按钮,那么电梯后继续等待关门时间,直到等待关门时间结束,没有人来
点击开门按钮后,电梯才会开始工作。
第一次非立即执行
export function debounce(f, t){
let timer;
return (...arg) => {
clearTimeout(timer);
timer = setTimeout(() =>{
f( ...arg)
}, t)
在点赞、输入框校验、取消点赞、创建订单等发送网络氢气的时候,如果我们连续点击按钮,
可能会发送多次请求。这个对于后台来说是不允许的。
在鼠标每次 resize/scroll 触发统计事件。
与函数防抖的胞兄,函数节流的原理也是大同小异,函数节流是在一定时间内我只会执行一次。
第一次非立即执行
export function throttle(f,t){
let timer=true;
return (...arg)=>{
if(!timer){
return;
timer=false;
setTimeout(()=>{
f(...arg);
timer=true;
在效果中,我们点击了非常多次,但是就只执行了4次,因为我规定的时间是1000ms执行一次。这样也是减少了执行次数。
第一次立即执行版本
export function throttleFirstExt(f, t) {
let flag = true;
return (...args) => {
if (flag) {
f(...args);
flag = false;
setTimeout(() => {
flag = true
}, t)