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


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 相关文章推荐
8款非常棒的响应式jQuery 幻灯片插件推荐
Feb 02 Javascript
火狐textarea输入法的bug的触发及解决
Jul 24 Javascript
JS逆序遍历实现代码
Dec 02 Javascript
Bootstrap编写一个同时适用于PC、平板、手机的登陆页面
Jun 30 Javascript
Node.js测试中的Mock文件系统详解
Nov 21 Javascript
bootstrapValidator.min.js表单验证插件
Feb 09 Javascript
详解jquery插件jquery.viewport.js学习使用方法
Sep 08 jQuery
vue使用element-ui的el-input监听不了回车事件的解决方法
Jan 12 Javascript
jQuery使用each遍历循环的方法
Sep 19 jQuery
Vue监听一个数组id是否与另一个数组id相同的方法
Sep 26 Javascript
js实现简单掷骰子效果
Oct 24 Javascript
React配置子路由的实现
Jun 03 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汉字转拼音的示例
2014/02/27 PHP
php树型类实例
2014/12/05 PHP
jQuery(js)获取文字宽度(显示长度)示例代码
2013/12/31 Javascript
js判断元素是否隐藏的方法
2014/06/09 Javascript
JavaScript将字符串转换成字符编码列表的方法
2015/03/19 Javascript
javascript实现dom元素可拖动
2016/03/21 Javascript
jQuery表单事件实例代码分享
2016/08/18 Javascript
详解微信小程序开发—你期待的分享功能来了,微信小程序序新增5大功能
2016/12/23 Javascript
jQuery基于ajax操作json数据简单示例
2017/01/05 Javascript
vue.js todolist实现代码
2017/10/29 Javascript
vue通过点击事件读取音频文件的方法
2018/05/30 Javascript
js代码规范之Eslint安装与配置详解
2018/09/08 Javascript
vue form check 表单验证的实现代码
2018/12/09 Javascript
使用 JavaScript 创建并下载文件(模拟点击)
2019/10/25 Javascript
vue接口请求加密实例
2020/08/11 Javascript
vue中element 的upload组件发送请求给后端操作
2020/09/07 Javascript
Python的组合模式与责任链模式编程示例
2016/02/02 Python
python append、extend与insert的区别
2016/10/13 Python
Python 判断是否为质数或素数的实例
2017/10/30 Python
python版学生管理系统
2018/01/10 Python
python 重命名轴索引的方法
2018/11/10 Python
使用jupyter Nodebook查看函数或方法的参数以及使用情况
2020/04/14 Python
比利时买床:Beter Bed
2017/12/06 全球购物
波兰最大的电商平台:Allegro.pl
2021/02/06 全球购物
.net面试题
2016/09/17 面试题
培训专员岗位职责
2014/02/26 职场文书
机械制造毕业生求职信
2014/03/03 职场文书
鉴定评语大全
2014/05/05 职场文书
党性分析材料格式
2014/12/19 职场文书
2015年高一班主任工作总结
2015/05/13 职场文书
党员廉政准则心得体会
2016/01/20 职场文书
2016年“我们的节日·清明节”活动总结
2016/04/01 职场文书
Python利器openpyxl之操作excel表格
2021/04/17 Python
详解MySQL的半同步
2021/04/22 MySQL
MySQL 不等于的三种使用及区别
2021/06/03 MySQL
Python OpenCV形态学运算示例详解
2022/04/07 Python