热搜:m1 nginx 代理 前端

前端节流的实现方法

2024-03-31 09:30:01

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

前端节流的实现方法 1

// 定时器版
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));