(四) js中的防抖和节流

1. 防抖函数

为什么需要防抖

先看这样一个例子: 我们需要根据用户的输入来想后台请求不同的数据

但是如果不设置某种规则, 而是当用户输入一个字符就发送一次请求, 这对于服务器的压力无疑是巨大的

    // 需求: 获取用户输入的内容, 并返回相应的结果

    var input = document.querySelector('input')

    function getDate(value) {
      console.log('ajax: ', value);
    }

    input.addEventListener("keyup", function (e) {
      getDate(e.target.value)
    })

那能不能当我们输入完以后, 再去调用请求函数向后台发送请求呢?

答案当然是可以的, 其中一种解决方案就是 使用防抖函数

---

什么是防抖函数

防抖函数是闭包的一个应用

在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时

也就是说, 防抖函数设置了这样一个规则: 我们设置一个定时器, 当事件被触发后的n秒后, 我们再去执行后续的操作, 比如发送网络请求, 但是如果在这n秒内, 事件又被触发一次, 那么定时器要重新计时, 重新在n秒后再去执行后续操作

举个例子

我们打游戏点了回城按钮 (触发事件)以后, 要等待10秒 (延时时间)才能进行传送 (后续操作), 但是如果倒计时在4s的时候, 我们又点击 (倒计时内再次触发)了一次回城, 那么倒计时将重新开始计时, 需要在重新等待10s后才能进行传送

var input = document.querySelector('input')

function getDate(value) {
  console.log('ajax: ', value);
}


function debounce(callBack, delay) {
  var timer;
  return function (value) {
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(function () {
      callBack(value)
    }, delay)
  }
}

var debounceInput = debounce(getDate, 1000)
input.addEventListener("keyup", function (e) {
  debounceInput(e.target.value)
})

2. 节流函数

为什么需要节流

看这样一个需求: 当我们点击注册按钮, 则向服务器提交表单信息

// 需求: 点击按钮, 提交信息
var btn = document.querySelector('button')

btn.addEventListener('click', function () {
  console.log('提交注册信息', new Date());
})

这里有一个很大的问题, 就是没有对按钮的点击事件进行妥善的处理, 导致每点击一次按钮, 就会发送一次表单提交, 这显然是不合理的

当然, 我们可以通过禁用来解决, 而这里我们可以用另外一种思路来解决

那就是 通过节流函数

---

什么是节流函数

规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。

简单理解: 触发一个事件后, n秒内进行触发动作, 不会进行事件处理, 而是要等n秒后, 上一个事件处理完成后, 再进行触发

例子

​ 这次以银行柜台办理业务为例, 5分钟办理一位, 5分钟之内哪怕后面的人再催, 也无法为其办理业务, 必须要等5分钟结束以后, 才能为下一位办理业务

// 需求: 点击按钮, 提交信息, 在3秒内再次点击, 不生效
var btn = document.querySelector('button')

function submit() {
  console.log('提交注册信息', new Date());
}

function throttle(callBack, delay) {
  var timer;
  return function () {
    if (!timer) {
      callBack()
      timer = setTimeout(function () {
        timer = null
      }, delay)
    }
  }
}

var throttleBtn = throttle(submit, 3000)
btn.addEventListener('click', function () {
  throttleBtn()
})