1. 防抖

事件频繁触发后的 n 秒内函数只会执行一次,如果 n 秒内高频事件再次被触发,则重新计算时间

应用场景

  • 输入框中频繁的输入内容，搜索或者提交信息
  • 频繁的点击按钮，触发某个事件
  • 监听浏览器滚动事件，完成某些特定操作
  • 用户缩放浏览器的resize事件

2.节流

事件频繁触发，但在n秒内只执行一次函数，不管在这个中间有多少次触发这个事件

应用场景

  • 监听页面的滚动事件
  • 鼠标移动事件
  • 用户频繁点击按钮操作
  • 游戏中的一些设计

    3.相似点

    防抖和节流都是为了当事件频繁触发时，能够控制函数执行的频率以防止前端性能下降或对服务器造成压力

    4.区别

    节流在一定时间内会触发函数，而防抖仅在最后一次触发

    5.手写防抖

    1. // 防抖
    2. function debounce(fn, delay) {
    3. // 1.定义一个定时器，保存上次的定时器
    4. let timer = null
    5. // 触发事件的时候 会将回调函数的this绑定到元素上，并传入event事件对象
    6. // 2.真正执行的函数
    7. return function (...args) {
    8.  // 取消上次的定时器
    9.  if (timer) clearTimeout(timer)
    10.  // 延迟执行
    11.  timer = setTimeout(() => {
    12.    // 外部传入的真正要执行的函数
    13.    fn.apply(this, args)
    14.    timer = null
    15.  }, delay)
    16. }
    17. }

    6.手写节流

    ```javascript // 节流 // 定时器实现 function throttle(fn, delay) { // 1.定义一个定时器 let timer = null return function (…args) { // 2.如果有定时器则return if (timer) return timer = setTimeout(() => { // 3.定时器执行完毕后，将timer设置为null，即可再次进行下一次执行 fn.apply(this, args) timer = null }, delay) } }

// 时间戳实现 function throttle(fn, delay) { let last = 0 return function (…args) { const now = Date.now() if(now - last > delay) { last = now fn.apply(this, args) } } }

```