提示:这次要讲的前端关于节流和防抖
一、什么是防抖?
防抖是指在频繁触发某一个事件时,一段时间内或者一定条件下不再触发该事件对应调用的函数。
二、防抖代码
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>
<style>
</style>
对按钮点击触发函数的防抖控制 : 按钮事件执行未完成时不多次重复执行对应按钮的业务逻辑。
三、节流的概念
在事件持续触发的前提下,保证一定时间段内只调用一次事件处理函数,就是函数节流;
1. 利用延时器实现节流
利用可以延时器实现节流,原理是连续触发时只执行最后一次事件。
如下面的例子:
页面滚动(连续事件),我们利用 setTimeout() 函数只执行识别最后一次。
<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>
</style>
2. 利用计时器实现节流
利用计时器可以实现在指定的间隔时间内只执行一次逻辑,从而控制逻辑执行次数,达到节流的目的。文章来源:https://www.toymoban.com/news/detail-508416.html
示例代码文章来源地址https://www.toymoban.com/news/detail-508416.html
<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>
到了这里,关于uni-app 实现节流与防抖的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!