vue实现防抖,vue自定义指令防抖
而防抖和节流的作用是防止函数被多次调用。下面这篇文章主要介绍vue功能防抖节流的正确使用方法。有需要的朋友可以参考一下。
前言
1.防抖(去抖):该功能在高频事件触发后N秒钟才会执行一次。如果N秒后再次触发高频事件,将重新计算时间。
比如就像百度搜索里,每次输入后都会弹出联想词。这种控制联想词的方法,不是输入框内容一变就能触发的,而是必须在你完成输入一段时间后才能触发。
Thorttle:由高频事件触发,但n秒才执行一次,所以节流会稀释函数的执行频率。
例如,一个函数被调度为仅在大于或等于执行周期时执行,并且在该周期内的调用不被执行。这就好比你在淘宝上抢购限量畅销商品的时候,不停的下单,不停的刷新,但总有一段时间,你的下单没有任何效果。这里用节流,就是怕点的太快造成系统的bug。
2.区别:镜像稳定器把多次执行变成最后一次执行,节流把多次执行变成常规执行。
防抖和功能节流一直是面试的话题。大家可能对函数防抖和节流的写法比较熟悉,但是有一个小插曲是关于在vue中使用函数防抖或者节流的。
vue中的正确使用姿势
在这个地方,我相信很多人会直接定义函数,然后在函数中使用去抖,这是不对的。
为什么?这和vue的事件绑定原理有关,这里就不赘述了。如果直接在函数体内部使用,最终结果是匿名的立即执行函数,这是错误的。详细参考
原理
函数的防抖
函数的防抖就是执行函数需要多长时间。我们可以理解为这样的生活场景(坐电梯)。点击开门按钮后,电梯会打开,然后在等待一段时间关闭。但是,如果在等待期间有人再次点击开门按钮,那么电梯将不会开始工作,直到等待时间结束,没有人点击开门按钮。
继续等待关门时
第一次非立即执行
导出函数去抖(f,t){
let定时器;
返回(.arg)={
clearTimeout(定时器);
timer=setTimeout(()={
f(.arg)
},t)
}
}
代码书写
对于某些场景,我不需要等待第一次,而是需要立即执行,比如:打开控制台获取窗口大小(这里我们需要一直改变窗口大小,等到停下来再获取窗口视图大小)。
导出函数deboutofirstexe(f,t){
设timer,flag=true
返回(.args)={
如果(标志){
f(.args);
flag=false
}否则{
clearTimeout(定时器);
timer=setTimeout(()={
f(.args);
flag=true
},t)
}
}
}
第一次立即执行
导出函数去抖(f,t,im=false){
设timer,flag=true
返回(.args)={
//需要立即执行的情况
如果(im){
如果(标志){
f(.args);
flag=false
}否则{
clearTimeout(定时器);
timer=setTimeout(()={
f(.args);
标志=真
},t)
}
}否则{
//非立即执行的情况
clearTimeout(定时器);
timer=setTimeout(()={
f(.参数)
},t)
}
}
}
合并版本我们的代码级别在哪里可以使用它?
发送网络氢赞时,勾选输入框,取消赞,创建订单等。如果我们连续点击按钮,我们可能会发送多个请求。这种背景不允许。每次鼠标调整大小/滚动时触发统计事件。
函数防抖
作为函数防抖的兄弟,函数节流的原理也差不多。我只会在某个时间段执行一次函数节流。
第一次非立即执行
出口函数油门(f,t){
设timer=true
返回(.arg)={
如果(!计时器){
返回;
}
定时器=假;
setTimeout(()={
f(.arg);
timer=true
},t)
}
}
效果中我们点击了很多次,但是只执行了四次,因为我规定的时间是1000ms执行一次。这也减少了执行的次数。
第一次立即运行该版本
导出函数throttlesfirstext(f,t) {
设flag=true
返回(.args)={
如果(标志){
f(.args);
flag=false
setTimeout(()={
标志=真
},t)
}
}
}
这里我们看到第一次点击将立即执行。
合并版
出口函数节流(f,t,im=false){
设flag=true
返回(.args)={
如果(标志){
标志=假
即时消息(.参数)
setTimeout(()={
!即时消息(.参数)
标志=真
},t)
}
}
}
函数节流
DOM (mousemove)拖放功能的实现
搜索关联(键盘输入)
计算鼠标移动的距离(mousemove)
画布模拟画板功能(鼠标移动)
射击游戏的mousedown/keydown事件(单位时间只能发射一颗子弹)
监控滚动事件,确定是否在页面底部自动加载更多:添加去抖滚动后,只有在用户停止滚动后,才会确定是否到达页面底部;如果是throttle,只要页面滚动,就会间隔判断。
总结
关于vue功能防抖和节流的正确使用,本文到此为止。更多关于vue功能防抖和节流的信息,请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们!
郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。