函数防抖
函数节流,真正的含义是:延迟函数执行。即不管debounce函数触发了多久,只在最后一次触发debounce函数时,才定义setTimeout,到达间隔时间再执行 需要防抖的函数。
用处:多用于 input 框 输入时,匹配的输入内容,加入购物车,防止发起请求的按钮多次请求接口等情况
函数节流
函数节流,真正的含义是:单位时间n秒内,第一次触发函数并执行,以后 n秒内不管触发多少次,都不执行。直到下一个单位时间n秒,第一次触发函数并执行,这个n秒内不管函数多少次都不执行。
用处:多用于页面scroll滚动,或者窗口resize这种会实时变化的函数,或者防止按钮重复点击(看项目需求,两种方式都可选择)等情况
一、在原生小程序中的使用
主要思路:把防抖和节流封装成全局方法,在需要用的地方引入调用
小程序中的全局方法的封装方式有两种:
1) 在app.js 中封装全局方法
2)单独封装在 js 文件
第一种方式的具体步骤:
(1) 在app.js 中封装全局方法
//app.js
App({
onLaunch: function () {
},
debounce(fn, interval) { //防抖
var timer;
var gapTime = interval || 1000;//间隔时间,如果interval不传,则默认1000ms
return function () {
clearTimeout(timer);
var context = this;
let args = arguments[0];//保存此处的arguments,因为setTimeout是全局的,arguments不是防抖函数需要的。
timer = setTimeout(function () {
fn.call(context, args);
}, gapTime);
};
},
throttle(fn, interval) { //节流
var enterTime = 0;//触发的时间
var gapTime = interval || 300 ;//间隔时间,如果interval不传,则默认300ms
return function() {
var context = this;
var backTime = new Date();//第一次函数return即触发的时间
if (backTime - enterTime > gapTime) {
fn.call(context,arguments[0]);
enterTime = backTime;//赋值给第一次触发的时间,这样就保存了第二次触发的时间
}
};
},
globalData: {
// userInfo: null
}
})
(2) 引入和使用
wxml 结构代码
<input class="flex1" placeholder="请输入开户行" value="{{bankname}}" bindinput="bankName"></input>
在使用的页面的js 文件 引入
const app = getApp();
bankName: app.debounce(function (e) { //防抖
// this.setData({ bankname: e.detail.value });
},500),
bankName:app.throttle(function(e){ //节流
console.log(e)
}),
注意: 全局方法arguments 处,可以使用arguments 或arguments[0],不同之处是使用arguments的话,在调用的地方输出的e 是数组格式的数据,arguments[0]和平时的e 是一样的
第二种单独封装在 js 文件中
(1)封装
common.js
具体导出方式自行选择,es5或es6根据自己选择
/*函数节流*/
export function throttle(fn, interval) {
var enterTime = 0;//触发的时间
var gapTime = interval || 300 ;//间隔时间,如果interval不传,则默认300ms
return function() {
var context = this;
var backTime = new Date();//第一次函数return即触发的时间
if (backTime - enterTime > gapTime) {
fn.call(context,arguments[0]);
enterTime = backTime;//赋值给第一次触发的时间,这样就保存了第二次触发的时间
}
};
}
/*函数防抖*/
export function debounce(fn, interval) {
var timer;
var gapTime = interval || 1000;//间隔时间,如果interval不传,则默认1000ms
return function() {
clearTimeout(timer);
var context = this;
var args = arguments[0];//保存此处的arguments,因为setTimeout是全局的,arguments不是防抖函数需要的。
timer = setTimeout(function() {
fn.call(context,args);
}, gapTime);
};
}
(2)引入和使用
在需要使用页面js文件
import {debounce,throttle} from '../../../utils/util' //使用哪个方法引入哪个,路径换成自己的
bankName:throttle(function(e){ //节流
console.log(e)
}),
bankName:debounce(function(e){ //防抖
console.log(e)
}),