vue使用防抖函数,vue 节流
本文主要介绍Vue2.x的例子——使用防抖和节流，帮助你更好的理解和学习使用Vue框架。感兴趣的朋友可以了解一下。
目录
utils:vue已用：解释：防抖：节流：
utils:
//防抖
导出常数去抖=(func，wait=3000，immediate=true)={
设timeout=null
返回函数(){
设上下文=this
设args=arguments
if (timeout) clearTimeout(超时)；
如果(立即){
var callNow=！超时；//第一次点击true，第二次点击false，然后重复第一次。
timeout=setTimeout(()={
超时=空；
}，等等)；//计时器ID
if (callNow) func.apply(context，args)；
}否则{
timeout=setTimeout(function() {
func.apply(context，args)；
}，等等)；
}
};
};
//时间戳方案
导出常量节流时间=(fn，wait=2000)={
var pre=date . now()；
返回函数(){
var context=this
var args=参数；
var now=date . now()；
if (now - pre=wait) {
fn.apply(上下文，参数)；
pre=date . now()；
}
};
};
//计时器方案
export const throttleSetTimeout=(fn，wait=3000)={
var timer=null
返回函数(){
var context=this
var args=参数；
如果(！计时器){
timer=setTimeout(function() {
fn.apply(上下文，参数)；
timer=null
}，等等)；
}
};
};
vue中使用：
模板
div class=main
立即执行PAnti-shake/p
按钮@click=click1 Click /button
br /
不立即执行PAnti-shake/p
按钮@ Click= Click 2 Click/按钮
br /
p限制时间戳方案/p
按钮@ Click= Click 3 Click/按钮
br /
p节流计时器方案/p
按钮@ Click= Click 4 Click/按钮
/div
/模板
脚本
从“”导入{ debounce，throttleTime，throttleSetTimeout }。/utils ；
导出默认值{
方法：{
点击1:去抖(
函数(){
Console.log(立即执行防抖)；
},
2000,
真实的
),
点击2:去抖(
函数(){
Console.log(不立即执行防抖)；
},
2000,
错误的
),
click 3:throttle time(function(){
Console.log(节流时间戳方案)；
}),
click 4:throttleSetTimeout(function(){
Console.log(节流计时器方案)；
})
},
};
/脚本
样式范围的语言=scss
* {
边距：0；
字体大小：20px
用户选择：无；
}。主要{
位置：绝对；
左：50%；
transform:translate x(-50%)；
宽度：500px
}
按钮{
边距-底部：100px
}
/风格
解释：
防抖：
立即执行版本：如果immediate为true，则在第一次点击后执行，再次点击后不执行。等待时间结束后，再次点击后生效，即只执行第一次。
原则：
如果第一次单击时没有timeoutID，callNow为true，那么将立即执行目标代码。如果第二次点击中有timeoutID，callNow为false，则不会执行目标代码。当等待时间结束时，timeoutID将被设置为null，并重复立即执行的逻辑。
不立即执行版本：如果immediate为false，则第一次点击不会执行，只有在等待时间结束后才会生效，即无论点击多少次，都只会执行最后一次点击事件。
原则：
使用setTimeout来延迟事件的执行。如果被多次触发，则上次clearTimeout执行的代码会重新启动。如果在计时期间没有事件被触发，目标代码将被执行。
节流：
当连续事件被触发时，以等待频率执行目标代码。
效果：
这就是Vue2.x例子的细节——使用防抖和节流。更多关于vue防抖和节流的信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。