持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第3天，点击查看活动详情

前言背景

为什么需要防抖节流？说到底，有些用户对窗口或者输入框操作的时候，频繁的点击和操作就会对浏览器或者服务器造成负担，所以这时候，这两个方法针对不同的操作就诞生了

防抖

多次点击，只执行最后一次

逻辑实现：

定了一个定时器，假如第一次触发进来，触发了定时器，第二次进来，定时器还没走完，那么就清掉了第一个，然后第二个就会重置定时器，主要靠定时器的返回值来判断，也可以另外找一个标志来判断，这都是可以的

场景：

scroll事件滚动
浏览器窗口的缩放resize事件
搜索框输入查询的时候
表单验证
按钮的提交事件

function debounce(fn, delay = 200) {
  let timer = 0
  return function() {
    // 如果这个函数已经被触发了
    if(timer){
      clearTimeout(timer)
    }
    timer = setTimeout(() => {
      fn.apply(this, arguments); // 透传 this和参数
      timer = 0
    },delay)
  }
}

节流

在一个时间段，只执行一次

逻辑实现：可能写法看起来跟防抖很像，但是其实还是有本质的区别，毕竟节流不会去重置定时器，只是限制一段时间内，我先把我这一个方法给执行了，再去执行下面的，一个方法进来，定时器的返回值作为一个标志，后续通过这个标志判断，后续的方法都不会继续执行，除非定时器触发，把这个标志置0，

场景：

DOM元素拖拽功能实现
计算鼠标移动距离
监听scroll滚动事件
搜索、提交等按钮功能

注意：拖动或者滚动这时候就不能使用防抖，因为防抖只能在结束后才执行，但是我想过程中就执行，所以使用节流就可以了

// 节流函数
function throttle(fn, delay = 200) {
  let  timer = 0
  return function () {
    if(timer){
      return
    }
    timer = setTimeout(() =>{
      fn.apply(this, arguments); // 透传 this和参数
      timer = 0
    },delay)
  }
}

JavaScript -- 浅谈防抖节流

前言背景

防抖

节流