uniapp防抖和节流
文章描述：
uniapp项目中实现防抖和节流功能
什么是防抖？
防抖是指在频繁触发某一个事件时，一段时间内或者一定条件下不再触发该事件对应调用的函数。
1、防止按钮在短时间连续点击，比如点击加载更多按钮
<template>
<view>
<view style="margin-top:80rpx;">
<view style="width:200rpx;">
<button
type="default"
@tap="buttonTap">点击</button>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
// 请求状态识别变量
requestStatus : false
}
},
methods:{
buttonTap:function(){
// 模拟按钮点击后会执行 api 请求，耗时 1 秒
// 请求完成前 按钮点击将不会继续执行此函数
if(this.requestStatus){
// 利用 return 终止函数继续运行
return false;
}
console.log('按钮点击函数执行');
// 执行函数
this.requestStatus = true;
setTimeout(()=>{
// 模拟执行完毕
// 改变 requestStatus
this.requestStatus = false;
}, 1000);
}
}
}
</script>
2、利用延时器节流方式
<template>
<view>
<view style="margin-top:80rpx;">
<view style="height:2000px; width:750rpx; background-color: #006065;">
滚动页面试试~~
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
// 延时器对象
scrollTimer : null
}
},
methods:{},
onPageScroll:function(e){
if(this.scrollTimer != null){
clearTimeout(this.scrollTimer);
}
this.scrollTimer = setTimeout(()=>{
console.log(e);
}, 100)
}
}
</script>
<style>
page{
height: 100%;
}
</style>3、利用计时器实现节流
<template>
<view>
<view style="margin-top:80rpx;">
<view style="height:20000px; width:750rpx; background-color: #006065;">
滚动页面试试~~
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
// 计时器时间
countTime : 0,
// 计时器对象
countTimer : null
}
},
methods:{},
onPageScroll:function(e){
// 函数执行时先判断时间
if(this.countTime >= 10){
// 利用 return 终止函数继续运行
return false;
}
// 开始计时
this.countTimer = setInterval(()=>{
if(this.countTime >= 500){
this.countTime = 0;
clearInterval(this.countTimer);
return;
}
this.countTime += 10;
}, 10);
// 执行逻辑
console.log(e);
}
}
</script>
<style>
</style>
发布时间：2023/01/19
发表评论