微信小程序 函数防抖和函数节流
2023-02-18 16:30:16 时间
函数防抖
:延迟函数执行,多用于input框输入时,显示匹配的输入内容的情况
函数节流
:单位时间n秒内,第一次触发函数执行 之后不管触发多少次都不执行。到下一个单位时间n秒时 第一次触发函数执行,多用于页面scroll滚动、窗口resize、防止按钮重复点击
函数节流是减少函数的触发频率;函数防抖是延迟函数执行,且不管触发多少次都只执行最后一次
小程序中使用函数防抖、节流一般都将这两种方法封装在公用的js中
//common.js
/*函数节流*/
function throttle(fn, interval) {
var enterTime = 0; //触发的时间
var gapTime = interval || 300; //间隔时间,如果interval不传值,默认为300ms
return function() {
var that = this;
var backTime = new Date(); //第一次函数return即触发的时间
if(backTime - enterTime > gapTime) {
fn.call(that, arguments);
enterTime = backTime; //赋值给第一次触发的时间 保存第二次触发时间
}
};
}
/*函数防抖*/
function debounce(fn, interval) {
var timer;
var gapTime = interval || 1000; //间隔时间 不传值默认为1000ms
return function() {
clearTimeout(timer);
var that = this;
var args = arguments; //保存arguments setTimeout是全局的 arguments不是防抖函数需要的
timer = setTimeout(function() {
fn.call(that, args);
}, gapTime);
};
}
/*导出*/
export default {
throttle,
debounce
};
使用
import tool from '路径';
Page({
data: {
a: 0
},
onPageScroll: tool.throttle(function(msg){
this.setData({
a: msg[0].scrollTop
});
}),
goUnlock: tool.debounce(function() {
this.saveUserInfo();
}),
saveUserInfo: function() {
console.log(1);
}
})
相关文章
- [android] 练习viewpagerindicator的使用(二)
- [日常] 小白来装机基本概念BIOS与硬盘分区
- [android] 两种异步方式
- [android] 通过比对进行容器联动
- [android] 实现返回键操作思路
- [android] 标题部分管理
- [android] socket在手机上的应用
- [android] 网络链接类型和渠道
- [android] android通信协议
- [android] android项目架构
- [小程序]微信小程序获取位置展示地图并标注信息
- [小程序]微信小程序获取input并发送网络请求
- [小程序]微信小程序登陆并获取用户信息
- [android] 手机卫士黑名单功能(短信拦截)
- [android] 手机卫士黑名单功能(ListView结合SQLite增删改)
- [android] 手机卫士黑名单功能(ListView优化)
- [android] 手机卫士黑名单功能(列表展示)
- [android] 手机卫士自定义吐司
- [android] 手机卫士接收打电话广播显示号码归属地
- [android] 手机卫士来电显示号码归属地