1、防抖
防抖: 本质是延迟函数的执行。比如定义了3S的延时,即触发了这里函数之后,要等3S才执行,如果在这3S内又触发了,那就在这个点往后3S,直到这3S内不再触发才会执行这个函数
用处: 多用于 input 框 输入时,显示匹配的输入内容的情况。
2、节流
防抖: 位时间n秒内,第一次触发函数并执行,以后 n秒内不管触发多少次,都不执行。直到下一个单位时间n秒。
用处: 多用于页面scroll滚动,或者窗口resize,或者防止按钮重复点击等情况
.
.
总结:函数防抖是 n秒后延迟执行;而函数节流是立马执行,n秒后再立马执行。
代码
一般都会把这两种方法封装在公用的tool.js 中:
/*函数节流(时间差):如果interval不传,则默认300ms*/
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);
enterTime = backTime;//赋值给第一次触发的时间,这样就保存了第二次触发的时间
}
};
}
/*函数防抖(定时器):如果interval不传,则默认1000ms*/
function debounce(fn, interval) {
var timer;
var gapTime = interval || 1000;//间隔时间,如果interval不传,则默认1000ms
return function() {
clearTimeout(timer);
var context = this;
var args = arguments;//保存此处的arguments,因为setTimeout是全局的,arguments不是防抖函数需要的。
timer = setTimeout(function() {
fn.call(context,args);
}, gapTime);
};
}
export default {
throttle,
debounce
};
使用:
import tool from "../utils/tool.js";
Page({
data: {
},
onLoad() {
},
button1: tool.throttle(function (msg) {
console.log("111执行:按钮一")
},3000),
button2: tool.debounce(function (msg) {
console.log("222执行:按钮二")
},4000),
})
wxml
<button bindtap="button1">按钮1</button>
<button bindtap="button2" style="margin-top:50rpx">按钮2</button>
本文是在https://www.cnblogs.com/zjjDaily/p/10840276.html的基础上,添加自己的理解整理出来的。