微信小程序防止多次点击跳转和防止表单组件输入内容多次验证功能(函数防抖)


Posted in Javascript onSeptember 19, 2019

一、函数节流(throttle)

**函数节流:一个函数执行一次后,只有大于设定的执行周期后才会执行第二次**。有个需要频繁触发函数,出于优化性能角度,在规定时间内,只让函数触发的第一次生效,后面不生效。

### 1.如何实现
其原理是用时间戳来判断是否已到回调该执行时间,记录上次执行的时间戳,然后每次触发 scroll 事件执行回调,回调中判断当前时间戳距离上次执行时间戳的间隔是否已经到达 规定时间段,如果是,则执行,并更新上次执行的时间戳,如此循环;

function throttle(fn, delay) {
// 记录上一次函数触发的时间
var lastTime = 0;
return function() {
// 记录当前函数触发的时间
var nowTime = Date.now();
if (nowTime - lastTime > delay) {
// 修正this指向问题
fn.call(this);
// 同步时间
lastTime = nowTime;
}
}
}
document.onscroll = throttle(function() { console.log('scroll事件被触发了' + Date.now()) }, 200)

微信小程序防止多次点击跳转和防止表单组件输入内容多次验证功能(函数防抖)

### 2.函数节流的应用场景
需要间隔一定时间触发回调来控制函数调用频率:

* DOM 元素的拖拽功能实现(mousemove)
* 搜索联想(keyup)
* 计算鼠标移动的距离(mousemove)
* Canvas 模拟画板功能(mousemove)
* 射击游戏的 mousedown/keydown 事件(单位时间只能发射一颗子弹)
* 监听滚动事件判断是否到页面底部自动加载更多:给 scroll 加了 debounce 后,只有用户停止滚动后,才会判断是否到了页面底部;如果是 throttle 的话,只要页面滚动就会间隔一段时间判断一次

二、函数防抖(debounce)

**防抖函数:一个需要频繁触发的函数,在规定时间内,只让最后一次生效,前面的不生效。**

### 1.如何实现

其原理就第一次调用函数,创建一个定时器,在指定的时间间隔之后运行代码。当第二次调用该函数时,它会清除前一次的定时器并设置另一个。如果前一个定时器已经执行过了,这个操作就没有任何意义。然而,如果前一个定时器尚未执行,其实就是将其替换为一个新的定时器,然后延迟一定时间再执行。

<button id='btn'>按钮</button>
<script type="text/javascript">
function debounce(fn, delay) {
// 记录上一次的延时器
var timer = null;
return function() {
// 清除上一次延时器
clearTimeout(timer)
timer = setTimeout(function() {
fn.apply(this)
}, delay)
}
}
document.getElementById('btn').onclick = debounce(function() {
console.log('点击事件被触发' + Date.now())
}, 1000)
</script>

微信小程序防止多次点击跳转和防止表单组件输入内容多次验证功能(函数防抖)

### 2.函数防抖的应用场景

对于连续的事件响应我们只需要执行一次回调:

* 每次 resize/scroll 触发统计事件
* 文本输入的验证(连续输入文字后发送 AJAX 请求进行验证,验证一次就好)

总结

以上所述是小编给大家介绍的微信小程序防止多次点击跳转和防止表单组件输入内容多次验证功能(函数防抖),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
javascript Array数组对象的扩展函数代码
May 22 Javascript
window.location.hash 使用说明
Nov 08 Javascript
javascript中数组的concat()方法使用介绍
Dec 18 Javascript
js(JavaScript)实现TAB标签切换效果的简单实例
Feb 26 Javascript
Js类的静态方法与实例方法区分及jQuery拓展的两种方法
Jun 03 Javascript
微信小程序实现页面跳转传值以及获取值的方法分析
Dec 18 Javascript
react-native-video实现视频全屏播放的方法
Mar 19 Javascript
Spring boot 和Vue开发中CORS跨域问题解决
Sep 05 Javascript
vue.js实现会动的简历(包含底部导航功能,编辑功能)
Apr 08 Javascript
vue实现设置载入动画和初始化页面动画效果
Oct 28 Javascript
详解如何在JS代码中消灭for循环
Dec 11 Javascript
javascript使用正则表达式实现注册登入校验
Sep 23 Javascript
vue 设置 input 为不可以编辑的实现方法
Sep 19 #Javascript
node 标准输入流和输出流代码实例
Sep 19 #Javascript
解决layui数据表格排序图标被超出的表头挤出去的问题
Sep 19 #Javascript
微信小程序3D轮播实现代码
Sep 19 #Javascript
layui 实现表格某一列显示图标
Sep 19 #Javascript
微信小程序防止多次点击跳转(函数节流)
Sep 19 #Javascript
layui按条件隐藏表格列的实例
Sep 19 #Javascript
You might like
PHP+Memcache实现wordpress访问总数统计(非插件)
2014/07/04 PHP
php实现保存周期为1天的购物车类
2017/07/07 PHP
php从数据库读取数据,并以json格式返回数据的方法
2018/08/21 PHP
CI框架教程之优化验证码机制详解【验证码辅助函数】
2019/04/16 PHP
javascript call方法使用说明
2010/01/11 Javascript
基于js disabled=&quot;false&quot;不起作用的解决办法
2013/06/26 Javascript
jQuery中next()方法用法实例
2015/01/07 Javascript
浅谈Javascript中的Function与Object
2015/01/26 Javascript
jQuery实现选项卡功能(两种方法)
2017/03/08 Javascript
ionic+AngularJs实现获取验证码倒计时按钮
2017/04/22 Javascript
JavaScript中set与get方法用法示例
2018/08/15 Javascript
教你使用vue-cli快速构建的小说阅读器
2019/05/13 Javascript
解决layer弹出层自适应页面大小的问题
2019/09/16 Javascript
js全屏事件fullscreenchange 实现全屏、退出全屏操作
2019/09/17 Javascript
使用nodejs实现JSON文件自动转Excel的工具(推荐)
2020/06/24 NodeJs
[51:06]DOTA2-DPC中国联赛 正赛 Elephant vs Aster BO3 第二场 1月26日
2021/03/11 DOTA
python使用点操作符访问字典(dict)数据的方法
2015/03/16 Python
Python面向对象特殊成员
2017/04/24 Python
python matplotlib 注释文本箭头简单代码示例
2018/01/08 Python
python正则表达式面试题解答
2020/04/28 Python
Django之Mode的外键自关联和引用未定义的Model方法
2018/12/15 Python
python字符串和常用数据结构知识总结
2019/05/21 Python
pytorch使用 to 进行类型转换方式
2020/01/08 Python
Python使用Pygame绘制时钟
2020/11/29 Python
python Protobuf定义消息类型知识点讲解
2021/03/02 Python
基于html5 canvas实现漫天飞雪效果实例
2014/09/10 HTML / CSS
潘多拉珠宝美国官方网站:Pandora US
2020/06/18 全球购物
Servlet的实例是在生命周期什么时候创建的?配置servlet最重要的是什么?
2012/05/30 面试题
刘胡兰的英雄事迹材料
2014/02/11 职场文书
学校后勤岗位职责
2014/02/19 职场文书
期中考试反思800字
2014/05/01 职场文书
社区服务活动小结
2014/07/08 职场文书
物理分数没达标检讨书
2014/09/13 职场文书
2014收银员工作总结范文
2014/12/16 职场文书
幼儿教师年度个人总结
2015/02/05 职场文书
鲲鹏 CentOS 7 安装Python3.7
2022/05/11 Servers