Vue中防抖和节流的使用
1.防抖。所谓防抖,就是指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间。思路:在计时函数前先清除之前触发的倒计时 ,比如执行了两次,在执行第二次的时候会清除第一次的倒计时 ,这样不管触发多少次都只会执行最后一次。clearsettimeout(this.timer)this.timer=settimeout(()=>{//代码},1000)2
·
1.防抖。
所谓防抖,就是指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间。
思路:在计时函数前先清除之前触发的倒计时 ,比如执行了两次,在执行第二次的时候会清除第一次的倒计时 ,这样不管触发多少次都只会执行最后一次。
clearsettimeout(this.timer)
this.timer=settimeout(()=>{
//代码
},1000)
下面是对防抖的封装,便于多次使用。
//常用场景→窗口变化、滚动条、input输入
window.onresize = (e) => {
//窗口变化
resizeFun()
};
//因为debouce函数返回值是一个函数;所以我们需要先去用变量声明一下再执行。
var resizeFun = debouce(()=>{
//这是我们传进去要执行的函数
consle.log(123)
},1000);
function debouce(callback,time){
let timer;//在函数里面声明不会导致全局污染
return function(){
clearTimeout(timer)//老样子先清除之前的计时器
timer = setTimeout(()=>{
callback()//这是我们传过来的函数
},time)
}
};
2.节流。
所谓节流,就是指连续触发事件但是在 n 秒中只执行一次函数。两种方式可以实现,分别是时间戳版和定时器版。
定时器版(先等待后执行,有最后一次)
if(this.timer){
return
}
this.timer = setTimeout(() => {
// 代码
timer = null
},1000 )
时间戳版(先执行后等待,无最后一次)
if(!this.time || Date.now() - this.time >= timer){//之前没有计时或者有但是没到点
//代码
this.time = Date.now()//获取当前时间戳
}
下面是对节流两种方式的封装
//常用场景→窗口变化、滚动条、input输入
window.onresize = (e) => {
//窗口变化
resizeFun()
};
//因为debouce函数返回值是一个函数;所以我们需要先去用变量声明一下再执行。
var resizeFun = debouce(()=>{
//这是我们传进去要执行的函数
consle.log(123)
},1000);
// callback要执行的函数,time即使时间(毫秒),immediately立即触发否
function debouce(callback,time,immediately){
//在函数里面声明不会导致全局污染
if(immediately === undefined){
//如果没有传就默认开启
immediately = true
}
if(immediately){
let t;//时间戳
return function(){
if(!t || Date.now() - t >= time){//之前没有计时或者有但是没到点
callback()
t = Date.now()//获取当前时间戳
}
}
}else{
let timer;//计时器
return function(){
if(timer){
return
}
timer = setTimeout(()=>{
callback()
timer = null//清除
},time)
}
}
};
更多推荐
已为社区贡献2条内容
所有评论(0)