节流是频繁操作的时候保持一个频率触发。比如拖拽一个元素时,要随时拿到这个元素被拖拽的位置。

// 定时器版
function throttle(fn, delay = 100) {
let flag = true;
return function(...args) {
if (!flag) return;
flag = false;
setTimeout(() => {
fn.call(this, ...args);
flag = true;
}, delay);
}
}
// 时间戳版
function throttle(fn, delay = 100) {
let prev = 0;
return function(...args) {
const now = Date.now();
if (now - prev > delay) {
fn.call(this, ...args);
prev = now;
}
}
}
// 使用
div.addEventListener('drag', throttle(function(e) {
console.log(e.offsetX, e.offsetY);
}, 300));