微信小程序防抖、节流的使用
2022-08-01 本文已影响0人
shine001
1、节流函数的封装
在utils文件夹下新建utils.js文件,然后写入节流和防抖函数
const throttle=(fn,wait)=> {//节流
var prev=Date.now();
return function () {
var context=this;
var args=arguments;
var now=Date.now();
console.log(now-prev>wait)
if(now-prev>wait){
fn.apply(context,args)
prev=Date.now()
}
}
}
2、防抖函数的封装
const debounce=(func, wait)=>{//防抖
// wait:500ms;func:被频繁触发的事件
let timeout;
return function () {
let context = this;
let args = arguments;
let later = () => {
timeout = null;
func.apply(context, args);
};
clearTimeout(timeout);
timeout = setTimeout(later, wait);
}
}
module.exports = {
throttle, debounce
}
在.js页面引入并使用:
var utils=require('../../../utils/util');
Page({
btnNext:utils.debounce(function(e) {
this.nextpage()
},500),
btnPrev:utils.debounce(function(e) {
this.prevpage()
},500),
})