作者：verde公寓_401 | 来源：互联网 | 2023-10-10 17:59
vue实现防抖,vue使用防抖函数
防抖和节流是开发过程中常用的性能优化方式，可以减少不必要的计算，不浪费资源，只在适当的时候触发计算。本文主要介绍vue中使用防抖和节流的相关信息，有需要的朋友可以参考一下。
目录
前言概念使用场景代码的防抖定义使用节流定义使用场景代码使用vue中的摘要
前言
在一个电影项目中，我想保存下拉在电影列表中的当前位置，以免你切换页面后再切换回当前电影列表页面，他会返回到电影的第一个数据。
这时候我不想每滑一点就保存当前位置。偶尔也想挽回一下。这个时候我可以用防抖和节流。
概念
说白了，防抖节流就是用定时器来达到我们的目的。
防抖(debounce)：
事件触发n秒后，将执行回调。如果在n秒内再次触发，计时器将重新计时。
一个典型的案例是输入框搜索：输入结束后n秒发出搜索请求，n秒内输入的内容再次计时。
节流(throttle)：
规定一个功能在单位时间内只能触发一次。如果一个功能在这个单位时间内被多次触发，那么只有一个功能会生效。
典型的情况是鼠标连续点击触发，规定N秒内多次点击只生效一次。
防抖
定义
频繁操作以防止抖动。如果你在操作后N秒内没有操作，事件就会被触发。如果继续操作，会再次计时。
使用场景
输入接线盒
缩放调整大小
代码
//utils.js
immediate是否立即开始执行？
函数去抖(func，delay=300，immediate=false) {
让定时器=空
返回函数(){
if(计时器){
清除超时(定时器)
}
如果(立即！计时器){
func.apply(这，参数)
}
timer=setTimeout(()={
func.apply(这，参数)
}，延迟)
}
}
在vue中使用
方法1:在公共方法utils中编写并介绍它。
从“实用程序”导入{去抖}
方法：{
app search:de bounce(function(e . target . value){
this.handleSearch(值)
}, 1000),
handleSearch(值){
console.log(值)
}
}
方法2:将其写入当前vue文件
数据：()={
返回{
去抖输入：()={}
}
},
方法：{
showApp(值){
console.log(值，值)
},
去抖(func，delay=300，immediate=false) {
让定时器=空
返回函数(){
if(计时器){
清除超时(定时器)
}
如果(立即！计时器){
func.apply(这，参数)
}
timer=setTimeout(()={
func.apply(这，参数)
}，延迟)
}
}
},
已安装(){
this . de bounce input=this . de bounce(this . show app，1000)
},
节流
定义
稀释功能频繁执行，频繁操作时每N秒触发一次。
使用场景
每单位时间只单击鼠标一次。
滚动事件、延迟加载、滚动加载、加载更多或监听滚动条位置
防止高频点击提交，防止表单重复提交。
代码
//utils.js
功能节流(func，delay=300) {
让prev=0
返回函数(){
let now=Date.now()
if((当前-先前)=延迟){
func.apply(这，参数)
prev=Date.now()
}
}
}
在vue中使用
使用与防抖相同的方法
总结
关于vue中防抖和节流的使用，这篇文章就到这里了。关于vue中防抖和节流使用的更多信息，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
京公网安备 11010802041100号