防抖
不管函数触发了多少次,只有在最后一次触发函数后,走完 setTimeout,再执行。
节流
第一次触发函数时执行,等待 setTimeout 走完后,再次触发函数,才执行。
tool.js
// 防抖
function debounce(fn, interval) {
var timer;
var gapTime = interval || 500
return function() {
clearTimeout(timer)
var that = this;
timer = setTimeout(function (){
fn.call(that);
}, gapTime);
}
}
// 节流
export function throttle(fn, interval = 500) {
let flag = false;
return function() {
if(!flag) {
flag = true
fn.apply(this, arguments);
setTimeout(() => {
flag = false
}, interval)
}
}
}
export default {
debounce,
throttle
}
使用
import tool from "../../utils/tool.js";
Page({
data:{
num: 2
},
gotoUnlock: tool.debounce(function() {
console.log(this)
}),
onPageScroll: tool.throttle(function(msg){
console.log(this)
}),
})