少小白学前端——JS篇（防抖与节流）

前言

       在开发过程中，我们往往会遇到一些问题，比如：提交表单，用户明明只点击了一次提交按钮，但却生成了两条数据，这时我们就会怀疑，用户会不会不小心多点了。
       当然也有可能是其他原因，但更多的，我们需要防止此类事件的发生，避免提交动作被频繁触发，尤其是在一些比较耗内存的操作上，更应如此。
       此时，大神会告诉我们，做一下防抖或节流，那么什么是防抖呢，节流又是什么呢，本文我们就来介绍一下。

一、概念

1、防抖（个人理解）：防抖就是，一个事件如果被连续触发（间隔很短，小于设定的时间间隔n），那么它只有在时间间隔超过n时，执行一次（就是停止触发前的那一次，或者说最后一次），而且是在设定的时间间隔到达后执行，最常见的则是表单的校验。

例如：一个input输入框，在用户输入的时候，我们如果需要根据输入内容，做一些验证，那么在用户输入过程中，这个校验便会被不断触发，此时为了提高性能，提升用户体验，便可以使用防抖函数，在用户停止修改的n毫秒后，开始验证。

2、节流：节流是在一定时间内，如果一个函数被连续触发，那么它只执行第一次，超过了设定时间，才会再次执行。

例如：表单提交，我们可以让它一秒内只提交一次，不论这段时间内点击了几次。只有超过一秒后，才可以点击提交第二次。

二、如何实现防抖与节流

要想实现这两种策略，我们可以编写防抖函数和节流函数。

/**
*  防抖函数
*  @param fn：需要防抖的函数（也就是被频繁触发的函数）
*  @param delay：毫秒数（设定的时间间隔）
*/
function debounce(fn, delay) {
   
    let timer;
    return function(...args) {
   
      if (timer) {
   
        clearTimeout(timer)
      }
      timer = setTimeout(() => {
   
        fn.apply(this, args)
      }, delay)
    }
  }
  
/**
*  节流函数
*  @param fn：需要节流的函数（被连续触发的函数）
*  @param delay：毫秒数（设定的时间）
*/
  function throttle(fn, delay = 500) {
   
    let lastTime = 0;
    return function (