携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第7天，点击查看活动详情 >>

防抖(Anti shake) 和 节流(Throttling)

防抖：多次操作统一为一次

取消上一次操作，并重新发起操作。

// 防抖实现
function antiShake(fn, wait){
  // 初始化定时器为 null
  let timeOut = null
  // 返回执行结果
  return arg => {
    // 判断是否已经有了上一次操作，如果有的话，关闭定时器
    if(timeOut) clearTimeout(timeOut)
    // 如果没有上一次操作，则开启一个新的定时器
    // 只要没有上一次操作，都会开启一个新的定时器（操作）
    timeOut = setTimeout(fn, wait)
  }
}

// 请求数据函数
function getData(){
  console.log('请求数据')
}

// 对指定对象实现监听
let clickButton = document.querySelector("button")
// 绑定点击事件，每次点击时去请求数据
clickButton.addEventListener('click', antiShake(getData, 300))

节流：一定时间内只允许执行一个事件

每段时间执行一次操作。

// 节流实现
function throttle(func, delay) {
	// 开关
  let run = true
  return function () {
    // 判断开关是否关闭了
    if (!run) {
      // 如果开关关闭了，那就不执行下边的代码
      return
    }
    // 开关开启后，添加定时器，设置延迟操作
    setTimeout(() => {
      func.apply(this, arguments)
      // 限制执行时间到了后开启开关
      run = true
    }, delay)
    // 关闭开关
    run = false
  }
}

// 使用节流
let body = document.querySelector("body");
body.onmousemove = throttle(function (e) {
  // 每零点五秒输出一次鼠标位置
  body.innerHTML = `${e.clientX}, ${e.clientY}`;
}, 500);

总结防抖与节流的区别

防抖动和节流的本质是不一样的。

1. 防抖是将多次执行变为最后一次执行。
2. 节流是将多次执行变成每隔一段时间执行一次。

应用场景

1. 防抖：

1. 屏幕滚动。
2. 浏览器窗口调整 resize。
3. 输入内容验证。
4. 搜索框联想功能。

2. 节流：

1. DOM 元素拖拽功能。
2. 计算鼠标移动距离。
3. 点击获取数据时。
4. 上拉下拉刷新获取最新数据时。