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

网络编程 2024/12/26 佚名

3 1 2

一、函数节流(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 请求进行验证，验证一次就好）

总结

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

微信小程序,跳转,微信小程序,验证

华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

评论“微信小程序防止多次点击跳转和防止表单组件输入内容多次验证功能（函数防抖）”

暂无评论...

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

2024年12月26日

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

微信小程序常用的3种提示弹窗实现详解

vue 设置 input 为不可以编辑的实现方法

评论“微信小程序防止多次点击跳转和防止表单组件输入内容多次验证功能（函数防抖）”

P70系列延期，华为新旗舰将在下月发布

更新日志

友情链接