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中防抖和节流使用的更多信息,请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们!
郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。