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


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 相关文章推荐
QQ邮箱的一个文本编辑器代码
Mar 14 Javascript
原生js结合html5制作简易的双色子游戏
Mar 30 Javascript
javascript排序函数实现数字排序
Jun 26 Javascript
详解JavaScript正则表达式之RegExp对象
Dec 13 Javascript
分享一个精简的vue.js 图片lazyload插件实例
Mar 13 Javascript
ES6 Promise对象概念与用法分析
Apr 01 Javascript
Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能
Jan 26 Javascript
vue编译打包本地查看index文件的方法
Feb 23 Javascript
layui实现数据表格table分页功能(ajax异步)
Jul 27 Javascript
vue-cli2与vue-cli3在一台电脑共存的实现方法
Sep 25 Javascript
vue-video-player视频播放器使用配置详解
Oct 23 Javascript
利用node.js开发cli的完整步骤
Dec 29 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个人网站架设连环讲(四)
2006/10/09 PHP
php实现天干地支计算器示例
2014/03/14 PHP
如何阻止网站被恶意反向代理访问(防网站镜像)
2014/03/18 PHP
浅析php静态方法与非静态方法的用法区别
2016/05/17 PHP
2017年最好用的9个php开发工具推荐(超好用)
2017/10/23 PHP
判断某个字符在一个字符串中是否存在的js代码
2014/02/28 Javascript
javascript中对变量类型的判断方法
2015/08/09 Javascript
jQuery实现图片轮播特效代码分享
2015/09/15 Javascript
AngularJs中route的使用方法和配置
2016/02/04 Javascript
浅析JavaScript中浏览器的兼容问题
2016/04/19 Javascript
jQuery实现的右下角广告窗体跟随效果示例
2016/09/16 Javascript
BootstrapValidator超详细教程(推荐)
2016/12/07 Javascript
vue自定义指令directive实例详解
2018/01/17 Javascript
p5.js实现斐波那契螺旋的示例代码
2018/03/22 Javascript
JavaScript 跨域之POST实现方法
2018/05/07 Javascript
详解Nuxt.js部署及踩过的坑
2018/08/07 Javascript
对vue2.0中.vue文件页面跳转之.$router.push的用法详解
2018/08/24 Javascript
解决layer.confirm快速点击会重复触发事件的问题
2019/09/23 Javascript
antd中table展开行默认展示,且不需要前边的加号操作
2020/11/02 Javascript
Python正则表达式匹配中文用法示例
2017/01/17 Python
Python3计算三角形的面积代码
2017/12/18 Python
对python插入数据库和生成插入sql的示例讲解
2018/11/14 Python
python 读写excel文件操作示例【附源码下载】
2019/06/19 Python
Python使用numpy模块实现矩阵和列表的连接操作方法
2019/06/26 Python
python 使用matplotlib 实现从文件中读取x,y坐标的可视化方法
2019/07/04 Python
查看Python依赖包及其版本号信息的方法
2019/08/13 Python
为什么黑客都用python(123个黑客必备的Python工具)
2020/01/31 Python
利用4行Python代码监测每一行程序的运行时间和空间消耗
2020/04/22 Python
python3中数组逆序输出方法
2020/12/01 Python
春季运动会广播稿大全
2014/02/19 职场文书
运动会口号16字
2014/06/07 职场文书
2015年党员自我剖析材料
2014/12/17 职场文书
五年级学生期末评语
2014/12/26 职场文书
停电调休通知
2015/04/16 职场文书
信仰纪录片观后感
2015/06/08 职场文书
vue如何清除浏览器历史栈
2022/05/25 Vue.js