(1)防抖:是指事件触发后在延迟一定的时间再去执行,若在延迟时间内再次触发则重新计算延迟时间。(debounce)
function debounce(fn, delay){
let timer = null;
return function(){
clearTimeout(timer);
timer = setTimeout(()=> {
fn.apply(this, arguments);
}, delay)
}
}
防抖的应用场景:
- 输入框中频繁的输入内容,搜索或者提交信息;
- 频繁的点击按钮,触发某个事件
- 监听浏览器滚动事件,完成某些特定操作;
- 用户缩放浏览器的resize事件;
(2)节流:当持续触发事件时,保证一定时间段内只调用一次事件处理函数。(throttle)
var throttle = function (fn, delay) {
var timer = null;
return function () {
var context = this;
var args = arguments;
if (!timer) {
timer = setTimeout(function () {
fn.apply(context, args);
timer = null;
}, delay);
}
}
}
节流的使用场景:
- 图片懒加载
- ajax数据请求加载