前言
函数节流是减少函数的触发频率;函数防抖是延迟函数执行,且不管触发多少次都只执行最后一次。
函数防抖
延迟函数执行。多用于 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
},
// 1. 写自己的函数
// 2. 传入到 throttle / debounce
// 默认时间(1秒)
onPageScroll: tool.throttle(function(a){
console.log(a)
}),
// 自定义时间
goUnlock: tool.debounce(function() {
// ...
},3000),
})