虚拟主机 视频网站,400电话安装佛山营销网站建设,安卓html编辑器,电商推广方案在前端开发中#xff0c;防抖#xff08;Debounce#xff09;和节流#xff08;Throttle#xff09;是两种常用的性能优化技术#xff0c;尤其在处理频繁触发的事件时显得尤为重要。无论是在用户输入、窗口调整大小#xff0c;还是滚动事件中#xff0c;这两种技术都可…在前端开发中防抖Debounce和节流Throttle是两种常用的性能优化技术尤其在处理频繁触发的事件时显得尤为重要。无论是在用户输入、窗口调整大小还是滚动事件中这两种技术都可以有效减少函数执行的频率从而提升网页的响应速度和用户体验。在本文中我们将深入探讨防抖和节流的原理、应用场景及其实现方法帮助开发者更好地掌控这两种优化手段。 现在好啦js-tool-big-box工具包提供出了这个两个方法并有专门的团队进行维护公有方法大家可以直接调用减少了自己的代码量可以有更多的时间去专注于自己的业务开发。
1 安装和引入
执行安装命令 npm i js-tool-big-box 项目中引入Vue项目工具包对外提供了 eventBox 对象可以用来调用防抖和节流的方法。
import { eventBox } from js-tool-big-box;
2 防抖的调用学习
防抖呢比如说一个人频繁在输入框输入值然后我们需要去判断它输入的手机号对不对邮箱对不对后者拿着这个输入值去发送Ajax请求去查东西肯定不能输入一个字符就赶紧拿着去查对吧所以就需要防抖。
防抖呢就是设定一个时间值比如2秒你在这2秒内有操作就取消一直到2秒后没有操作了再去执行任务。
比如等电梯早上着急打卡的同学们越着急越有人按电梯有人按一下就得等5秒除非有人急的不行了按了关闭按钮。所以等5秒没人上了电梯关闭开始往上走。如果第4秒又有人按按钮他进来了那么就再等5秒吧。
templatedivinput keyuphandleChange v-modelinputVal //div
/templatescript
import { eventBox } from js-tool-big-box;export default {name: dj,data () {return {inputVal: }},created() {this.myDebounce eventBox.debounce((data) {this.sendAjax(data);}, 2000);},methods: {handleChange(event) {const val event.target.value;this.myDebounce(val);},sendAjax(data) {console.log(发送时间, new Date().getTime());console.log(发送请求, data);},}
}
/script 在截图中我分别输入了1 222 333 其中222和333是频繁输入的然后只调用了一次 3 节流的调用学习
节流呢就像坐火车人来人往的车站川流不息的人群但火车有时刻表隔多久一趟车。下拉刷新就正好用到这个地方。
script
import { eventBox } from js-tool-big-box;export default {name: dj,data () {return {inputVal: }},created() {this.myThrottle eventBox.throttle((data) {this.sendAjax(data);}, 2000);},methods: {handleChange(event) {const val event.target.value;this.myThrottle(val);},sendAjax(data) {console.log(发送时间, new Date().getTime());console.log(发送请求, data);},}
}
/script 看这个时间戳打印的我一直在频繁输入然后他隔一段时间才执行一次不错不错节流了。
4 使用方法总结
方法名返回值入参debounce传入的执行方法 第一个参数必填表示需要执行的方法 第二个参数非必填表示需要延迟执行的时间可不传默认300毫秒 throttle传入的执行方法 第一个参数必填表示需要执行的方法 第二个参数非必填表示需要延迟执行的时间可不传默认300毫秒
