摘要
防抖就是指触发事件后把触发非常频繁的事件合并成一次去执行,节流是指频繁触发事件时只会在指定的时间段内执行事件回调,即触发事件间隔大于等于指定的时间才会执行回调函数,这篇文章主要给大家介绍了关于uniapp项目使用防抖及节流的相关资料,需要的朋友可以参考下
目录
- 此方案出现的理由
- 实现方案及效果
- 总结
此方案出现的理由
实现方案及效果
- 新建一个debounce-view组件
- 直接用debounce-view包裹需要防抖的内容即可，如下：
<debounce-view @thTap="buyNow">
<view class="buy-now">立即购买</view>
</debounce-view>防抖组件内容：
//debounce-view
<template>
<view @click.stop="deTap">
<slot></slot>
</view>
</template>
<script>
function deBounce(fn, delay = 500, immediate) {
let timer = null,
immediateTimer = null;
return function() {
let args = arguments,
context = this;
// 第一次触发
if (immediate && !immediateTimer) {
fn.apply(context, args);
//重置首次触发标识，否则下个周期执行时会受干扰
immediateTimer = setTimeout(() => {
immediateTimer = null;
}, delay);
}
// 存在多次执行时，重置动作需放在timer中执行；
if (immediateTimer) clearTimeout(immediateTimer);
if (timer) clearTimeout(timer);
timer = setTimeout(() => {
fn.apply(context, args);
timer = null;
immediateTimer = null;
}, delay);
}
}
export default {
methods: {
deTap: deBounce(function() {
console.log('deTap')
this.$emit('deTap')
}, 500, true),
}
}
</script>
<style>
</style>节流组件内容：
<template>
<view @click.stop="thTap">
<slot></slot>
</view>
</template>
<script>
// 第二版
function throttle(func, wait) {
var timeout;
var previous = 0;
return function() {
context = this;
args = arguments;
if (!timeout) {
timeout = setTimeout(function() {
timeout = null;
func.apply(context, args)
}, wait)
}
}
}
export default {
methods: {
thTap: throttle(function() {
this.$emit('thTap')
}, 500)
}
}
</script>
<style>
</style>总结
- 上述方法有有点但也有缺点，优点是使用起来非常的快捷方便，缺点是时间目前是写死的，各位看官如果有新的想法或者意见还请指教小弟一二
到此这篇关于uniapp项目使用防抖及节流的文章就介绍到这了,更多相关uniapp使用防抖及节流内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持www.adminjs.cn！