【JavaScript】通过js实现防抖和节流

- 什么是防抖

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

    - 用户在输入框中连续输入一串字符后，只会在输入完后去执行最后一次的查询ajax请求，这样可以有效减少请求次数，节约请求资源
    - window的scroll事件，不断地调整浏览器的窗口大小、或者滚动时会触发对应事件，防抖让其只触发一次

  - 实现

  handleClick() {
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        console.log(111);
      }, 1000);
    },

    

- 什么是节流

  - 规定一个单位时间，只能有一次触发事件的回调函数执行，如果在同一时间内某事件被触发多次，只有一次能生效

    - 鼠标连续不断地触发某事件（如点击），按照设置的时间来逐次执行；
    - 在页面的无限加载场景下，当用户频繁滚动页面时，每隔一段时间才发一次请求展示数据，而不是按照用户滚动次数来请求数据

  - 实现

  

    handleClick() {
      if (this.isRun) {
        return;
      }
      this.isRun = true;
      setTimeout(() => {
        this.isRun = false;
        console.log(111);
      }, 1000);
    },