小程序优化~~~节流函数
时间:2021-07-12
本文章向大家介绍小程序优化~~~节流函数,主要包括小程序优化~~~节流函数使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
场景
小程序的页面添加跳转或者触发一个函数,发现在超过0.3s的连续点击中
小程序的机制会多次触发,尤其在使用navigateTo 进行跳转的时候
快速点击,发现会连续跳转,虽然不会对页面的栈造成堆积,如果你不使用wx.navigateBack
会造成返回多次现象
解决方式
可以使用throttle节流函数,进行封装一个小程序专有的函数
保证在可控时间内,这个函数的事件只能触发一次
1.首先在util.js创建节流函数
function throttle(fn, gapTime) { if (gapTime == null || gapTime == undefined) { gapTime = 1500 } let _lastTime = null // 返回新的函数 return function () { let _nowTime = + new Date() if (_nowTime - _lastTime > gapTime || !_lastTime) { fn.apply(this, arguments) //将this和参数传给原函数 _lastTime = _nowTime } } }
记得要在 module.exports抛出函数
module.exports = { throttle: throttle }
2.在页面逻辑中使用
首先要引入util.js
const util = require('../../utils/util.js')
在需要使用的函数
checkBtn: util.throttle(function (e) { wx.navigateTo({ url: '../X/X', }) }, 3000),
函数中加入的3s为,从触发函数到3s在这个时间内,这个函数只能执行一次
这样就完美避开了,如何防止多次触发函数事件了
而且3s后这个函数事件恢复正常
原文地址:https://www.cnblogs.com/kaicy/p/15001390.html
- 书写高质量代码之状态维护
- SPRING框架中ModelAndView、Model、ModelMap区别
- Java常用工具类之时间转换
- Java常用工具类之自定义访问对象
- quartz定时任务,已过期的内容自动下线
- http请求,HttpClient,调用短信接口
- Java常用工具类之压缩解压
- Java常用工具类之MD5加密
- Java常用工具类之发送邮件
- Spring Boot入门
- IDEA使用
- JFinal极速开发框架使用笔记(二) 两个问题,一个发现
- JFinal极速开发框架使用笔记(三) 分析Model和ActiveRecord
- JFinal极速开发框架使用笔记(四) _JFinalDemoGenerator实体类生成及映射自动化
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 微信小程序实时语音识别实践
- 轻量安全的部署方案
- 阿里2020.7.31笔试
- 聊聊dubbo-go的PrometheusReporter
- 聊聊dubbo-go的apolloConfiguration
- 看了这篇,关于浏览器缓存你还有哪些疑问?
- 深入分析Volatile的实现原理
- Java Collection Framework : List
- String类的equals方法
- 必须同时重写hashcode和equals方法的原因
- Springboot中使用Redis的发布/订阅模式
- Java 几种排序算法 与时间空间复杂度
- JAVA程序员必须要学会的网络知识
- 计算机网络学习--数据链路层
- 带你快速了解原码、反码、补码,搞定进制转换