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


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 火狐(firefox)不显示本地图片问题解决
Jul 05 Javascript
Uploadify上传文件方法
Mar 16 Javascript
js中常用的Tab切换效果(推荐)
Aug 30 Javascript
Angular2 多级注入器详解及实例
Oct 30 Javascript
如何解决vue与传统jquery插件冲突
Mar 20 Javascript
基于JSON数据格式详解
Aug 31 Javascript
详解10分钟学会vue滚动行为
Sep 21 Javascript
vue-cli如何引入bootstrap工具的方法
Oct 19 Javascript
详解JS模块导入导出
Dec 20 Javascript
jQuery解析json格式数据示例
Sep 01 jQuery
js和jquery判断数据类型的4种方法总结
Aug 28 jQuery
echarts浮动显示单位的实现方法示例
Dec 04 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命名空间(namespace)的动态访问及使用技巧
2014/08/18 PHP
php微信公众平台配置接口开发程序
2016/09/22 PHP
PHP+MySQL实现在线测试答题实例
2020/01/02 PHP
常用简易JavaScript函数
2009/04/09 Javascript
有关javascript的性能优化 (repaint和reflow)
2013/04/12 Javascript
javascript模拟订火车票和退票示例
2014/04/24 Javascript
jQuery及JS实现循环中暂停的方法
2015/02/02 Javascript
JavaScript控制listbox列表框的项目上下移动的方法
2015/03/18 Javascript
jQuery使用after()方法在元素后面添加多项内容的方法
2015/03/26 Javascript
javascript实现计时器的简单方法
2016/02/21 Javascript
使用 NodeJS+Express 开发服务端的简单介绍
2017/04/07 NodeJs
详解如何使用webpack打包Vue工程
2017/05/27 Javascript
手把手教你使用vue-cli脚手架(图文解析)
2017/11/08 Javascript
简单的三步vuex入门
2018/05/20 Javascript
react native基于FlatList下拉刷新上拉加载实现代码示例
2018/09/30 Javascript
JS数组去重的6种方法完整实例
2018/12/08 Javascript
VUE实现密码验证与提示功能
2019/10/18 Javascript
three.js 如何制作魔方
2020/07/31 Javascript
[00:05]ChinaJoy现场 DOTA2玩家高呼“CN DOTA BEST DOTA”
2019/08/04 DOTA
python使用urllib2模块获取gravatar头像实例
2013/12/18 Python
简化Python的Django框架代码的一些示例
2015/04/20 Python
Python数据结构之图的应用示例
2018/05/11 Python
使用pandas把某一列的字符值转换为数字的实例
2019/01/29 Python
Pandas读取并修改excel的示例代码
2019/02/17 Python
关于python 跨域处理方式详解
2020/03/28 Python
浅谈TensorFlow之稀疏张量表示
2020/06/30 Python
解决pytorch 保存模型遇到的问题
2021/03/03 Python
Html5页面内使用JSON动画的实现
2019/01/29 HTML / CSS
Java面试题:Java类的Main方法如果是Private将会怎么样
2016/08/18 面试题
前台接待员岗位职责
2014/01/02 职场文书
九年级政治教学反思
2014/02/06 职场文书
《美丽的丹顶鹤》教学反思
2014/04/22 职场文书
科级干部群众路线教育实践活动个人对照检查材料
2014/09/19 职场文书
房屋出售授权委托书
2014/10/12 职场文书
2014年科技工作总结
2014/11/26 职场文书
js前端图片加载异常兜底方案
2022/06/21 Javascript