【微信小程序】小程序中的函数节流
大ga吼! 很久没写博客咯,今天学到了一点新知识, 记录分享一下~
摘要: 小程序中的函数节流
场景: 从商城列表进入商品详情中时,或者生成,提交订单, 付款的时候, 若用户快速点击(一秒8键,母胎solo20年),则容易造成重复进入页面/生成多余订单/重复付款等等不符合实际需求的麻烦,所以作为一个优秀的web前端开发工程师(主要是产品经理比比了),需要避免这种情况!(谁tm没事一秒8键啊????????????)
/****具体场景自己脑补****/
干货:
这里提出两种解决办法:
Fn1: 在data中设置一个变量flag,默认值为true, 点击时先取出 flag, let _flag = this.data.flag,然后将flag 取false,this.setData({ flag: false}) 再根据 _flag 的值,决定是否执行业务逻辑。对了, 最后千万别忘了在 onload 或者 onshow 或者 onunload 的时候,将 flag 取 true, 这样才能保证在业务逻辑的正常执行, 要不然的话, 代码将成为一次性代码,点一次之后后面就不再执行咯。
此种方法可满足大部分场景, 但是不够优雅, 而且缺点也很明显, 就是必须退出或卸载此页面时, 才能执行第二次业务逻辑, 所以有些场景可能不适应, 再来看第二种解决办法。
Fn2: 第二种方法就是使用函数节流,什么叫节流自己百度下,不费多少电。
直接贴代码:
data: {
pre: 0,
},
throttle (fn, delay = 2000) {
let pre = this.data.pre // 初始值是 0
let that = this
return function () {
let now = + new Date();
if(now - pre >= delay) {
fn.apply(this, arguments)
that.setData({
pre: now
})
}
}
},
toDetail () {
this.throttle(function(){
wx.navigateTo({
url: '../carDetail/carDetail?id=' + 100040
})
}, 2000)()
},
代码就是这么回事, 照抄准没错, 我快下班了, 下次有时间了再写点注释。。。。。
-------------------------------------------20191017的一点补充-----------------------------------------------------
因为许多地方都需要用到节流, 所以封装成一个方法, 用来全局调用
封装之后的效果:
这里 throttle 函数接收4个变量, me 是传入的this, 否则我们在调用的时候, throttle内部会找不到this, 从而setData失败, key 是我们设置在data中的时间初始值, 这样做有什么好处呢? 就是我们在同一个页面需要多次节流的时候, 通过传入不同的key, 就可以单独管理每个节流点了, fn 就是我们本来要执行的函数, delay 就是点击的频率, 默认1000, 即每1秒内本事件只能执行一次, 想要再执行要等下一秒, 当然,这个你可以根据自己的需要自由设置;
function throttle (me, key, fn, delay = ) {
let pre = me.data[key]
return function () {
let now = + new Date();
if(now - pre >= delay) {
fn.apply(me, arguments)
pre = now
me.setData({
[key]: now
})
}
}
}
module.exports = {
throttle
}
调用也很简单
data: {
pre:,
},
myclick: function (e) {
let that = this
throttle(that, 'pre', function(){
console.log(111111111111)
}, )()
},
好的, 就到这里了
最近联盟出手游了, 看到一句话贼搞笑
【微信小程序】小程序中的函数节流的更多相关文章
- JS中的函数节流throttle详解和优化
JS中的函数节流throttle详解和优化在前端开发中,有时会为页面绑定resize事件,或者为一个页面元素绑定拖拽事件(mousemove),这种事件有一个特点,在一个正常的操作中,有可能在一个短的 ...
- javascript中的函数节流和函数去抖
带着问题去尝试 首先我们要知道为什么要用到函数节流和函数去抖?我们带着以下的疑问来进行分析! 1.比如搜索框,你会用到什么事件(change.blur.keyup等)?去做什么效果?2.再比如scro ...
- 谈谈JS中的函数节流
好吧,一直在秋招中,都没怎么写博客了...今天赶紧来补一补才行...我发现,在面试中,讲到函数节流好像可以加分,尽管这并不是特别高深的技术,下面就聊聊吧! ^_^ 备注:以下内容部分来自<Jav ...
- JS中的函数节流
函数节流的目的 从字面上就可以理解,函数节流就是用来节流函数从而一定程度上优化性能的.例如,DOM 操作比起非DOM 交互需要更多的内存和CPU时间.连续尝试进行过多的DOM 相关操作可能会导致浏览器 ...
- [转] 谈谈JS中的函数节流
函数节流的目的 从字面上就可以理解,函数节流就是用来节流函数从而一定程度上优化性能的.例如,DOM 操作比起非DOM 交互需要更多的内存和CPU 时间.连续尝试进行过多的DOM 相关操作可能会导致浏览 ...
- 【javascript】js中的函数节流和函数防抖
一.概念解释 函数节流和函数防抖,两者都是优化高频率执行js代码的一种手段. 大家大概都知道旧款电视机的工作原理,就是一行行得扫描出色彩到屏幕上,然后组成一张张图片.由于肉眼只能分辨出一定频率的变 ...
- 浅谈javascript的函数节流
什么是函数节流? 介绍前,先说下背景.在前端开发中,有时会为页面绑定resize事件,或者为一个页面元素绑定拖拽事件(其核心就是绑定mousemove),这种事件有一个特点,就是用户不必特地捣乱,他在 ...
- JS的函数节流(throttle)
什么是函数节流? 介绍前,先说下背景.在前端开发中,有时会为页面绑定resize事件,或者为一个页面元素绑定拖拽事件(其核心就是绑定mousemove),这种事件有一个特点,就是用户不必特地捣乱,他在 ...
- JS函数节流
背景:在前端开发中,有时会为页面绑定resize事件,或为一个页面元素拖拽事件(其核心就是绑定mousemove)在一个正常操作中也有可能在一个短时间内触发非常多次事件绑定程序,而DOM操作是很消耗性 ...
随机推荐
- Tomcat 简单容器化
Tomcat 容器化 思考 问题1 , Tomcat 容器化,Tomcat 如何配置 APR 连接器 Tomcat 的基础镜像已经是开启了 APR. 问题2, Tomcat 是每次都需要重新构建. 一 ...
- 对象数组自定义排序--System.Collections.ArrayList.Sort()
使用System.Collections.ArrayList.Sort()对象数组自定义排序 其核心为比较器的实现,比较器为一个类,继承了IComparer接口并实现int IComparer.Com ...
- 配置IIS网站可以下载.apk/.ipa文件
添加 扩展名是:.apk MIMI类型是:application/vnd.android.package-archive 扩展名是:.ipa MIMI类型是:application/iphone
- C# vb .NET生成QR二维码
二维码比条形码具有更多优势,有些场合使用二维码比较多,比如支付.通过将某些数据生成二维码,就可以实现一码走天下.那么如何在C#,.Net平台代码里生成二维码呢?答案是使用SharpBarcode! S ...
- C# - VS2019WinFrm桌面应用程序FtpClient实现
前言 本篇主要记录:VS2019 WinFrm桌面应用程序实现简单的FtpClient,包含Ftp文件查看.上传和下载等功能. 准备工作 搭建WinFrm前台界面 添加必要的控件,这里主要应用到Gro ...
- windows 下安装MongoDB
一:下载mongodb安装包 下载地址:https://www.mongodb.com/download-center/community 这里推荐下载msi的安装包 二:安装mongodb 双击下载 ...
- SAP S4HANA 账户组的配置里'Int.Std.Grping'选项没勾选导致ABAP程序报错
SAP S4HANA 账户组的配置里'Int.Std.Grping'选项没勾选导致ABAP程序报错 BP,试图创建一个新的vendor code, 角色是ZGM001, Grouping是G001, ...
- Objective-c 字面量
Objective-c早就支持字面量,但是IOS到XCODE 4.5,IOS6,LLVM4.0才开始较好的支持字面量. 以下是简要对比: 未使用字面量 使用字面量 NSString *greeting ...
- Spring事务部分知识点整理
目录 1.数据库事务基础概念 2.Spring中注解事务的使用 3.Spring事务使用注意场景 1.数据库事务基础概念 数据库事务是对数据库一次一系列的操作组成的单元,可以包含增删改查或者只有单 ...
- 一不小心把windows资源管理器给结束任务了 电脑黑屏了 怎么处理
按键盘上的三个键,Ctrl+Shift+Esc来启动任务管理器: 在任务管理器界面的左上角,有一个“文件”按钮,点击它会出现下拉的“新建任务(运行)...”按钮 鼠标点了“新建任务(运行)...”会弹 ...