uniapp中，有時也需要用到防抖與節流這兩種事件，方法思路與web端的思路一致，
防抖：在此時間段觸發幾次事件，就延遲觸發幾次，并只觸發最后一次事件，（一直快速觸發幾分鐘后停止，也只執行最后的那一次事件）
節流：在規定時間內僅能觸發一次，但到了下一個時間段，也還會繼續觸發一次，執行新的事件，
示例：直接放入vue檔案并運行即可，
<template>
<view >
<view >
<view @click="fd">
防抖按鈕
</view>
<view @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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/353194.html
標籤：JavaScript
上一篇：JS呼叫堆疊
下一篇：JavaScript 定時器