1 节流

可以形象理解为“节约流量”防止事件高频触发

作用

将高频触发变为低频触发

场景

1. 降低resize等事件触发频率
2. 无限加载场景下，定期触发

代码

function throttle(fn, delay = 100) {let timer = null;return function() {if (timer) return;timer = setTimeout(() => {fn.apply(this, arguments);timer = null}, delay)}
}

2 防抖

可以形象理解为“防止抖动（手抖）”导致事件多次触发

作用

将多次触发变为最后一次触发

场景

1. 防止表单重复提交
2. 防止事件多次触发

代码

function debounce(fn, delay = 100) {let timer = null;return function() {if (timer) clearTimeout(timer)timer = setTimeout(() => {fn.apply(this, arguments);timer = null}, delay)}
}