个人网站的基本风格是,张家港网站设计优化,邯郸思勤网络科技有限公司,企业网站建设分析报告防抖和节流都是可以限制短时间内事件的频繁触发导致前端资源开销过大或者对后端服务器造成压力的问题。
1. 防抖
防抖是当事件被频繁触发时#xff0c;只有最后一次事件会成功执行#xff0c;一般的实现方式是#xff0c;每次触发先检查是否有定时器存在#xff0c;有的话…防抖和节流都是可以限制短时间内事件的频繁触发导致前端资源开销过大或者对后端服务器造成压力的问题。
1. 防抖
防抖是当事件被频繁触发时只有最后一次事件会成功执行一般的实现方式是每次触发先检查是否有定时器存在有的话删除定时器然后重新在定时器中执行那个事件。用通俗的讲就是假设A按钮按一次等五秒才会出结果在五秒内又被按了一次需要再等五秒才能执行事件有网友说就像是英雄联盟里按B的回城被打断了
适用场景是搜索框提示等到用户输入后等待一小段时间再提示减轻服务端压力。
以下是在项目中使用到的封装代码首先在utils包下创建一个ts文件
// ts版本
// eslint-disable-next-line typescript-eslint/ban-types
export const debounce (fn: Function, delay: number) {let debounceTimer: NodeJS.Timeout | null;return (...args: any[]) {if (debounceTimer) {clearTimeout(debounceTimer);}debounceTimer setTimeout(() {fn.apply(this, args);}, delay);};
};
// ts版本应用使用上和javascrpit不一样
const de debounce(() {console.log(刷新);
}, 2000);
const reflesh () {de();
};// Js版本:
export const debounce (fn, delay) {let timer null;return (...args) {if (timer) {clearTimeout(timer);}timer setTimeout(() {fn(this, args);}, delay);};
};
// Js版本应用:
const click debounce(() {console.log(点击);
}, 1000);
2.节流
节流是当时间多次被触发时在指定的单位时间内只会被触发一次。就是A按钮被点击后限定时间内被点击的就无效类似于我们玩黑魂时疯狂按鼠标攻击也只会A一下需要等到一定时间后才可以A
使用场景刷新按钮以及监听滚动获取分页数据。 // 节流, 是在重复的事件请求中单位时间内只执行一次
// ts版本
// eslint-disable-next-line typescript-eslint/ban-types
export const throttle (fn: Function, delay: number): Function {let throttleTimer: NodeJS.Timeout | null;return (...args: unknown[]) {if (throttleTimer) {return;}throttleTimer setTimeout(() {fn.apply(this, args);throttleTimer null;}, delay);};
};// ts版本 使用
const th throttle(() {console.log(刷新);
}, 2000);
const reflesh () {th();
};// js版本
export const throttle (fn, delay) {let timer null;return (...args) {if (timer) {return;}timer setTimeout(() {fn(this, args);timer null;}, delay);};
};
//js使用
const click throttle(() {console.log(点击);
}, 1000);主要区别还是ts和js对于闭包的使用方式不同。
