js 防抖和节流简单总结

先搁着吧，抽空研究总结一下，先把这段高度调节利用防抖的代码贴上

<template>
  <div id="functions" :style="defaultHeight">
  </div>
</template>

<script>
    export default {
        name: "index.vue",
        components: {
          NavHeader: ()=>import('@/components/functions/NavHeader'),
          SideBar: ()=>import('@/components/functions/SideBar')
        },
        data() {
          return {
            defaultHeight: {
              height: ""
            }
          };
        },
        mounted() {
          // this.$nextTick(()=>{
          //   setTimeout(()=>{
              window.addEventListener("resize", this.debounce(this.getHeight,200, false));
              this.getHeight();
          //   }, 3000)
          // })
        },
        methods: {
          getHeight() {
            console.log('window.clientHeight', document.body.clientHeight)
            // this.defaultHeight.height = document.body.clientHeight + "px"
            this.defaultHeight = { height:  document.body.clientHeight + 'px'}
            console.log('defaultHeight', this.defaultHeight.height)
          },
          debounce(fn,wait){
            var timer = null;
            return function(){
              if(timer !== null){
                clearTimeout(timer);
              }
              timer = setTimeout(fn,wait);
            }
          }
        }
    }
</script>

<style scoped>

</style>

看到的一篇可以参考的文章：JS中的函数防抖