Reasons for this plan to appear
- Instruction method functions that cannot be used in mini programs to achieve anti-shake throttling
- The traditional anti-shake throttling method is relatively cumbersome
Implementation of solutions and effects
- Create a new debounce-view component
- Just use debounce-view to wrap the content that needs anti-shake, as follows:
<debounce-view @thTap="buyNow">
<view class="buy-now">Buy it now</view>
</debounce-view>Anti-shake component content:
//debounce-view
<template>
<view @="deTap">
<slot></slot>
</view>
</template>
<script>
function deBounce(fn, delay = 500, immediate) {
let timer = null,
immediateTimer = null;
return function() {
let args = arguments,
context = this;
// The first trigger if (immediate && !immediateTimer) {
(context, args);
//Reset the first trigger flag, otherwise it will be disturbed when the next cycle is executed immediateTimer = setTimeout(() => {
immediateTimer = null;
}, delay);
}
// When there are multiple executions, the reset action needs to be placed in the timer to execute; if (immediateTimer) clearTimeout(immediateTimer);
if (timer) clearTimeout(timer);
timer = setTimeout(() => {
(context, args);
timer = null;
immediateTimer = null;
}, delay);
}
}
export default {
methods: {
deTap: deBounce(function() {
('deTap')
this.$emit('deTap')
}, 500, true),
}
}
</script>
<style>
</style>Throttle component content:
<template>
<view @="thTap">
<slot></slot>
</view>
</template>
<script>
// Second Edition function throttle(func, wait) {
var timeout;
var previous = 0;
return function() {
context = this;
args = arguments;
if (!timeout) {
timeout = setTimeout(function() {
timeout = null;
(context, args)
}, wait)
}
}
}
export default {
methods: {
thTap: throttle(function() {
this.$emit('thTap')
}, 500)
}
}
</script>
<style>
</style>Summarize
- The above method has some but also disadvantages. The advantage is that it is very fast and convenient to use. The disadvantage is that the time is currently written. If you have new ideas or opinions, please give me some advice.
This is the article about the use of anti-shake and throttling of uniapp projects. For more related content on anti-shake and throttling of uniapps, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!