前端防抖和节流

 节流使用场景:常用于页面滚动后的针对不同位置发送请求,避免频繁的请求服务器

 /**
     * 节流 节流的策略是，每个时间周期内，不论触发多少次事件，也只执行一次动作。
     * 上一个时间周期结束后，又有事件触发，开始新的时间周期，同样新的时间周期也只会执行一次动作。
     *  @param fn 回调函数
     *  @param time 触发事件周期 单位毫秒
     **/
    let throttleTimer = null;
    window.addEventListener('scroll', this.throttle, true);

    function throttle(fn, time) {
      if (throttleTimer) return
      throttleTimer = setTimeout(() => {
        //你的操作
        fn()
        throttleTimer = clearTimeout(throttleTimer)
      }, time)
    }

防抖使用场景:常用于提交表单等相关按钮操作,避免用户频繁点击后发送重复请求

 /**
     * 节流 多次快速频繁地触发事件，也只会执行一次事件函数
     * @param fn 回调函数
     * @param time 触发事件周期 单位毫秒
     **/
    let shakeTimer = null;

    function shake(fn, time) {
      if (shakeTimer) shakeTimer = clearTimeout(shakeTimer)
      timer = setTimeout(() => {
        //你的操作
        fn()
      }, time)
    }