uniapp微信小程序常用防抖函数及调用
先看代码,复制使用即可。(防抖一般用于按钮使用,避免如登陆,购买等多次调用,如多次点击购买按钮在网速较慢下可能生成多个订单信息等)这里只是一个封装调用的简单流程,如您使用我们官方产品 uview, 防抖参考: throttle & debounce节流防抖.您需要先定义一个js文件复制以下代码//防抖原理:一定时间内,只有最后一次操作,再过times毫秒后才执行函数let timeout
·
先看代码,复制使用即可。(防抖一般用于按钮使用,避免如登陆,购买等多次调用,如多次点击购买按钮在网速较慢下可能生成多个订单信息等)
这里只是一个封装调用的简单流程,如您使用我们官方产品 uview, 防抖参考: throttle & debounce节流防抖.
您需要先定义一个js文件 复制以下代码
//防抖原理:一定时间内,只有最后一次操作,再过times毫秒后才执行函数
let timeout = null;
// 执行函数 时间 是否立即执行
function debounce(func, times = 500, immediate = false) {
// 清除定时器
if (timeout !== null) clearTimeout(timeout);
// 立即执行,传true 则不进行防抖 一般不传递第三个参数
if (immediate) {
var callNow = !timeout;
timeout = setTimeout(function() {
timeout = null;
}, times);
if (callNow) typeof func === 'function' && func();
} else {
// 设置定时器,当最后一次操作后,timeout不会再被清除,所以在延时times毫秒后执行func回调方法
timeout = setTimeout(function() {
typeof func === 'function' && func();
}, times);
}
}
export default debounce
调用方式如下
import debounce from '配置路径'
methods:{
//不需要自定义 时间和立即执行时
getCode:debounce(function(){
//您的逻辑操作
})
//需要自定义 时间和立即执行时
getCode:debounce(function(){
//您的逻辑操作
},1000,true)
}
其他有关uniapp的疑问或者此方法不理解的地方您可留言,我会尽快回复并帮您解决。
更多推荐
已为社区贡献8条内容
所有评论(0)