前端的小伙伴对于防抖、节流肯定不会陌生,日常开发中的一些业务场景很多会用到他们,而且这也是面试时常遇到的手写题目。不是很了解的小伙伴可以认真的看一看哦,很简单的。
let num = 0;
btn.addEventListener('click', debounce(handle, 2000, ['点赞', '分享']))
// 两秒后,box元素的内容变为num;
function handle(a, b) {
num ++;
box.innerHTML = num;
console.log(a, b, num)
}
/**
防抖 debounce
触发某个动作,n秒后执行对应事件,若n秒内再次触发,则重新计时
指定时间内多次触发某个操作,按最后一次来计时
例: 点击地图指定区域,两秒后,上方弹出对应信息弹框; 频繁改变窗口大小resize; 搜索框keyup、keydown等触发后台请求;
@param: handle - 需要触发的事件
@param: delay - 间隔事件
@param: argus - 参数数组
*/
function debounce(handle, delay, argus) {
let timer;
return function() {
if (timer) clearTimeout(timer);
timer = setTimeout(() => {
handle(...argus);
timer = null;
}, delay)
}
}
/**
节流 throttle
n秒内多次触发某个操作,只执行第一次; 例: 滚动加载;
@param: handle - 需要触发的事件
@param: delay - 间隔事件
@param: argus - 参数数组
*/
function throttle(handle, delay, argus) {
let onOff = true;
return function() {
if (onOff) {
setTimeout(() => {
handle(...argus);
onOff = true
}, delay)
}
onOff = false;
}
}
前端小菜鸟,哪里写的不对,还请各位大佬快快指出,非常感谢。
转载请注明出处,谢谢。