欢迎光临
我的个人博客网站

uniapp js 按钮 点击事件 防抖节流 防抖和节流事件的触发

uniapp中,有时也需要用到防抖与节流这两种事件。方法思路与web端的思路一致。

防抖:在此时间段触发几次事件,就延迟触发几次,并只触发最后一次事件。(一直快速触发几分钟后停止,也只执行最后的那一次事件)

节流:在规定时间内仅能触发一次,但到了下一个时间段,也还会继续触发一次,执行新的事件。 

示例:直接放入vue文件并运行即可。

<template>
<view class=”fanjun-jsSkill”>
<view class=”oneSkill”>
<view class=”fdButton btn” @click=”fd”>
防抖按钮
</view>
<view class=”jlButton btn” @click=”jl”>
节流按钮
</view>
</view>
</view>
</template>

<script>
export default {
data() {
return {
fdFlag: null,
jlFlag: true
}
},
methods: {
fd() {
let that = this
clearTimeout(this.fdFlag)
this.fdFlag = setTimeout(() => {
that.fdDoing()
that.fdFlag = null
}, 800)
// 在此时间段触发几次事件,就延迟触发几次,并只触发最后一次事件。
},
fdDoing() {
console.log(‘防抖事件触发’)
},
jl() {
let that = this
if(!this.jlFlag) {
return
}
this.jlFlag = false
setTimeout(() => {
that.jlDoing()
that.jlFlag = true
},1200)
// 一定时间内,只执行一次有效事件
},
jlDoing() {
console.log(‘节流事件触发’)
}
}
}
</script>

<style>
.oneSkill {
display: flex;
flex-direction: row;
justify-content: space-around;
}

.btn {
width: 160rpx;
height: 46rpx;
background-color: #007AFF;
color: #FFFFFF;
border-radius: 20rpx;
text-align: center;
line-height: 46rpx;
vertical-align: middle;
}
</style>

赞(0) 打赏
未经允许不得转载:张拓的天空 » uniapp js 按钮 点击事件 防抖节流 防抖和节流事件的触发
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏