今天研究了一下scroll 的節(jié)流 和 防抖，寫了一個demo，最后發(fā)現(xiàn)被觸發(fā)的順序改變了，但是被觸犯的次數(shù)都是69，既然被觸發(fā)的次數(shù)都相同請問節(jié)流和防抖到底有什么意義呢？代碼如下

<template>
  <div class="container" style="height: 667px;">
    <div class="content" style="height: 3000px"></div>
    <a href="javascript: void(0)" 
        @click="_getNum"
        style="color: blue; font-size: 20px;"
    >點擊</a>
  </div>
</template>

export default {
  data(){
    return {
      a: 0,
      b: 0,
      c: 0
    }
  },
  mounted(){
    var container = document.getElementsByClassName('container')[0]
    container.addEventListener('scroll', () => {
      this.a++
      this.debounce(() => {
        this.b++
      }, 250)
      this.throttling(() => {
        this.c++
      }, 500, 1000)
    })
  },
  methods: {
    _getNum(){
      console.log(this.a, this.b, this.c)
    },
    // 防抖
    debounce(func, wait, immediate) {
      var timeout
      return function(){
          var context = this,
              args = arguments
          var later = function(){
              timeout = null
              if(!immediate){
                  func.apply(context, args)
              }
          }
          var callNow = immediate && !timeout
          clearTimeout(timeout)
          timeout = setTimeout(later, wait)
          if(callNow){
              func.apply(context, args)
          }
      }()
    },
    // 節(jié)流
    throttling(fn, wait, maxTimelong) {
      var timeout = null,
          startTime = Date.parse(new Date);
      return function() {
          if(timeout !== null) clearTimeout(timeout);
          var curTime = Date.parse(new Date);
          if(curTime-startTime>=maxTimelong) {
              fn() && (startTime = curTime)
          } else {
              timeout = setTimeout(fn, wait);
          }
      }()
    }
  }
}

然后滾動瀏覽器，結(jié)果如下