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

164 浏览量更新于2023-05-04 收藏 70KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源推荐

微信小程序防止多次点击跳转和防止表单组件输入内容多次验微信小程序防止多次点击跳转和防止表单组件输入内容多次验

证功能（函数防抖）证功能（函数防抖）

一、函数节流一、函数节流(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;

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

weixin_38693173

粉丝: 4
资源: 948

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈