uni-app 实现节流与防抖

这篇具有很好参考价值的文章主要介绍了uni-app 实现节流与防抖。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

提示:这次要讲的前端关于节流和防抖


一、什么是防抖?

防抖是指在频繁触发某一个事件时,一段时间内或者一定条件下不再触发该事件对应调用的函数。

二、防抖代码

1.示例 : 防止按钮多次连续点击

代码如下(示例):

<template>
	<view>
		<view style="margin-top:80rpx;">
			<view style="width:200rpx;">
				<button 
				type="default" 
				@tap="buttonTap">点击</button>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			// 请求状态识别变量
			requestStatus : false
		}
	},
	methods:{
		buttonTap:function(){
			// 模拟按钮点击后会执行 api 请求,耗时 1 秒
			// 请求完成前 按钮点击将不会继续执行此函数
			if(this.requestStatus){
				// 利用 return 终止函数继续运行
				return false;
			}
			console.log('按钮点击函数执行');
			// 执行函数
			this.requestStatus = true;
			setTimeout(()=>{
				// 模拟执行完毕
				// 改变 requestStatus
				this.requestStatus = false;
			}, 1000);
		}
	}
}
</script>
<style>
</style>

对按钮点击触发函数的防抖控制 : 按钮事件执行未完成时不多次重复执行对应按钮的业务逻辑。

三、节流的概念

在事件持续触发的前提下,保证一定时间段内只调用一次事件处理函数,就是函数节流;

1. 利用延时器实现节流

利用可以延时器实现节流,原理是连续触发时只执行最后一次事件。

如下面的例子:

页面滚动(连续事件),我们利用 setTimeout() 函数只执行识别最后一次。

<template>
	<view>
		<view style="margin-top:80rpx;">
			<view style="height:2000px; width:750rpx; background-color: #006065;">
				滚动页面试试~~
			</view>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			// 延时器对象
			scrollTimer : null
		}
	},
	methods:{},
	onPageScroll:function(e){
		if(this.scrollTimer != null){
			clearTimeout(this.scrollTimer);
		}
		this.scrollTimer = setTimeout(()=>{
			console.log(e);
		}, 100)
	}
}
</script>
<style>
</style>

2. 利用计时器实现节流

利用计时器可以实现在指定的间隔时间内只执行一次逻辑,从而控制逻辑执行次数,达到节流的目的。

示例代码文章来源地址https://www.toymoban.com/news/detail-508416.html

<template>
	<view>
		<view style="margin-top:80rpx;">
			<view style="height:20000px; width:750rpx; background-color: #006065;">
				滚动页面试试~~
			</view>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			// 计时器时间
			countTime  : 0,
			// 计时器对象
			countTimer : null
		}
	},
	methods:{},
	onPageScroll:function(e){
		// 函数执行时先判断时间
		if(this.countTime >= 10){
			// 利用 return 终止函数继续运行
			return false;
		}
		// 开始计时
		this.countTimer = setInterval(()=>{
			if(this.countTime >= 500){
				this.countTime = 0;
				clearInterval(this.countTimer);
				return;
			}
			this.countTime += 10;
		}, 10);
		// 执行逻辑
		console.log(e);
	}
}
</script>
<style>
</style>

到了这里,关于uni-app 实现节流与防抖的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uni-app x生成的安卓包,安装时,提示不兼容。解决方案

    找到 manifest.json 进入:源码视图 packagename:包名;最好是和你“发行”(打包)时的包名一致。 abiFilters:需要兼容CPU的类型 minSdkVersion:应用兼容的最低Android版本(API等级) targetSdkVersion:应用适配的目标Android版本(API等级)   官方说明:manifest.json | uni-app官网 App-Android端发

    2024年02月03日
    浏览(91)
  • uni-app点击按钮弹出提示框(以弹窗的形式显示),选择确定和取消

    学习目标如下所示: uni-app点击提交按钮后弹出提示框,(以弹窗的形式显示),提示用户是否确认提交(即确定和取消),点击确定后调用真正的提交方法,将数据传给后端,点击取消后,模态框自动消失,不请求后端接口。 内容如下所示: 显示用户需要确认的模态框 点击

    2024年02月15日
    浏览(35)
  • 【uni-app】uni-app实现聊天页面功能——功能篇(上)

    上一篇讲到了如何布局,这一篇将讲一下如何用uni-app实现小程序聊天页面的最主要的功能——发消息后页面滚动到最底部(参考过很多文章最后找到比较适合的方法)。 其他的功能(参考微信),之后的文章会讲述到具体实现方法 点击聊天框的时候,聊天框随键盘抬起且聊

    2024年02月11日
    浏览(64)
  • 【uni-app】uni-app实现聊天页面功能(小程序)——布局篇

    在工作中使用uni-app参与开发一个小程序,其中要写一个简单的聊天页面,虽然功能不多(只有一个发送文字的功能),但是其中的细节比较多,也踩过很多坑,特此记录下来。要实现的页面如图所示,该篇主要讲讲如何布局(参考了很多文章之后根据页面需求进行一个整合)

    2024年02月05日
    浏览(91)
  • 【前端】防抖和节流原理+实现

    防抖(Debounce)和节流(Throttle)都是用于控制函数执行频率的机制,它们在处理高频触发的事件时非常有用。 防抖的原理是在事件被触发后,等待一段时间(例如200毫秒)来执行函数,如果在等待时间内事件被再次触发,则重新计时。这样可以避免在短时间内多次触发事件

    2024年04月16日
    浏览(37)
  • 防抖和节流及多种实现方式

    当用户在网页中进行操作时,如点击、滚动、输入等,往往会频繁地触发事件。如果每个事件都立即执行相应的函数,可能会导致性能问题和用户体验不佳,因为这些函数可能需要执行复杂的操作,如计算、网络请求等。 为了优化这种情况,我们可以使用防抖和节流来限制函

    2023年04月24日
    浏览(42)
  • uni-app实现复制文本

    在做项目的过程中,为了完善用户体验,尝尝需要做复制文本的功能。 而 uni-app官方提供的uni.setClipboardData(OBJECT)复制功能并不兼容H5端, 所以我们要做个区分,经过本人测试,可以使用,直接上代码:

    2024年02月12日
    浏览(42)
  • uni-app 实现文件上传

    在使用若依的框架时,发现若依移动端框架中已经封装好了一个upload.js用于文件上传,自己在这个版本的基础上稍作改动,成功实现文件上传功能 若依公共的 upload.js  自己再封装一个 js 文件,此处命名 upload.js 但不和若依的文件放在同一个目录下 在文件中调用需要先引入

    2024年02月11日
    浏览(56)
  • uni-app实现下拉刷新

    业务逻辑如下: 1.在滚动容器中加入refresher-enabled属性,表示为开启下拉刷新 2.监听事件,添加refresherrefresh事件 3.在事件监听函数中加载数据 4.关闭动画,添加refresher-triggered属性,在数据请求前开启刷新动画,在数据请求完成后关闭动画。 完整代码如下: 注意:如果不用

    2024年04月13日
    浏览(63)
  • uni-app实现水印相机

    点击“拍照”,拍照成功后在底部生成已经添加上水印的图片,点击图片查看图片 为了让自定义的按钮如:旋转镜头、打开/关闭 闪光灯、拍摄等能够位于 camera 组件上层,所以容器都采用 cover-view、cover-image 需要提前下载腾讯地图微信小程序JavaScript SDK,实现定位功能 本文章

    2024年02月07日
    浏览(50)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包