当前位置: 七九推 > IT编程>数据库>Redis > uniapp项目使用防抖及节流的方案实战

uniapp项目使用防抖及节流的方案实战

2023年01月21日 Redis 我要评论
此方案出现的理由小程序中无法使用vue.directive的指令方法函数实现防抖节流传统的防抖节流方式相对繁琐实现方案及效果新建一个debounce-view组件直接用debounce-view包裹需

此方案出现的理由

  • 小程序中无法使用vue.directive的指令方法函数实现防抖节流
  • 传统的防抖节流方式相对繁琐

实现方案及效果

  • 新建一个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使用防抖及节流内容请搜索七九推以前的文章或继续浏览下面的相关文章希望大家以后多多支持七九推!

(0)
打赏 微信扫一扫 微信扫一扫

相关文章:

  • 使用Redis缓存时高效的批量删除的几种方案

    使用Redis缓存时高效的批量删除的几种方案

    前因后果之前我们的服务,在上线的时候发现有一些大key的使用不是很规范,特别是没有设置过期时间,因此导致redis中内存的数据越来越多,目前redis节点的内存... [阅读全文]
  • Redis+Hbase+RocketMQ 实际使用问题案例讲解

    Redis+Hbase+RocketMQ 实际使用问题案例讲解

    需求将hbase数据,解析后推送到rocketmq。redis使用list数据类型,存储了需要推送的数据的rowkey及表名。简单画个流程图就是:分析及确定方案... [阅读全文]
  • Redis脑裂导致数据丢失的解决

    Redis脑裂导致数据丢失的解决

    1 案例主从集群有1个主库、5个从库和3个哨兵实例,突然发现客户端发送的一些数据丢了,直接影响业务层数据可靠性。最终排查发现是主从集群中的脑裂问题导致:主从集群... [阅读全文]
  • 浅谈Redis在秒杀场景的作用

    浅谈Redis在秒杀场景的作用

    秒杀业务特点:限时限量,业务系统要处理瞬时高并发请求,redis是必需品。秒杀可分成秒杀前、秒杀中和秒杀后三阶段,每个阶段的请求处理需求不同,redis具体在秒... [阅读全文]
  • Redis使用Bitmap的方法实现

    1. bitmap 是什么bitmap(也称为位数组或者位向量等)是一种实现对位的操作的'数据结构',在数据结构加引号主要因为:bitmap 本身不是一种数据结构,…

    2023年01月27日 数据库
  • Redisson如何解决redis分布式锁过期时间到了业务没执行完问题

    面试问题redis锁的过期时间小于业务的执行时间该如何续期?问题分析首先如果你之前用redis的分布式锁的姿势正确,并且看过相应的官方文档的话,这个问题so easy.我们来看很多…

    2023年01月14日 数据库

版权声明:本文内容由互联网用户贡献,该文观点仅代表作者本人。本站仅提供信息存储服务,不拥有所有权,不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 2386932994@qq.com 举报,一经查实将立刻删除。

发表评论

验证码:
Copyright © 2017-2023  七九推 保留所有权利. 粤ICP备17035492号
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com