函数防抖与节流
函数防抖:就是当持续发生事件时,一定时间内没有触发事件,则执行一段事件处理函数,倘若在一定时间内触发了事件,就开始重新计时。
应用场景: 当创建角色时需要输入用户名去请求数据库内有没有重复的用户名,这时需要在用户停止输入后的n秒,向服务器请求判断是否重名。
代码实现
function debounce(fn) {
let timeout = null;
return function () {
clearTimeout(timeout);
timeout = setTimeout(() => {
fn.apply(this, arguments);
}, 500);
};
}
function handle() {
console.log(Math.random());
}
window.addEventListener('scroll', debounce(handle));
函数节流 : 就是当持续发生事件时,在一定时间内触发一次事件处理函数。
应用场景 : 当上拉加载更多时,不能在用户停止上拉加载时,再去请求后台数据,需要在特定的时间内去加载数据,这时,就需要用到节流。
代码实现
function throttle(fn) {
let canRun = true;
return function () {
if (!canRun) return;
canRun = false;
setTimeout(() => {
fn.apply(this, arguments);
canRun = true;
}, 500);
};
}
function sayHi(e) {
console.log(e.target.innerWidth, e.target.innerHeight);
}
window.addEventListener('resize', throttle(sayHi));