函数节流: 英文 throttle 有节流阀的意思。大致意思也是 节约触发的频率
那么,函数节流,真正的含义是:单位时间n秒内,第一次触发函数并执行,以后 n秒内不管触发多少次,都不执行。直到下一个单位时间n秒,第一次触发函数并执行,这个n秒内不管函数多少次都不执行。
用处:多用于页面scroll滚动,或者窗口resize,或者防止按钮重复点击等情况
函数防抖: 英文 debounce 有防反跳的意思,大致就是指防止重复触发。
那么,函数防抖,真正的含义是:延迟函数执行。即不管debounce函数触发了多久,只在最后一次触发debounce函数时,才定义setTimeout,到达间隔时间再执行 需要防抖的函数。
用处:多用于 input 框 输入时,显示匹配的输入内容的情况。
使用:封装在util.js里
// 函数节流
function throttle(fn, interval = 2000) {
var enterTime = 0; //触发的时间
var gapTime = interval; //间隔时间,如果interval不传,则默认2000ms
return function (e) {
var that = this;
var backTime = new Date(); //第一次函数return即触发的时间
if (backTime - enterTime > gapTime) {
fn.call(that, e, arguments);
enterTime = backTime; //赋值给第一次触发的时间,这样就保存了第二次触发的时间
}
};
}
// 函数防抖
function debounce(fn, interval = 2000) {
var timer;
var gapTime = interval; //间隔时间,如果interval不传,则默认2000ms
return function (e) {
clearTimeout(timer);
var that = this;
var args = arguments; //保存此处的arguments,因为setTimeout是全局的,arguments不是防抖函数需要的。
timer = setTimeout(function () {
fn.call(that, e, args);
}, gapTime);
};
}
调用
var uril = require('../../utils/util')
Page({
onPageScroll: uril.throttle(function () {
console.log(111)
}),
gotoUnlock: uril.debounce(function () {
console.log(222)
}),
})