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中的函数防抖

如果大家想一起交流学习，共同进步，欢迎搜索公众号“是日前端”，输入关键词如：前端基础，获取资料，资料刚开始整理，目前还在完善中，点击交流群按钮进交流群，群里仅限技术交流、面试交流等，需要其它相关资料可以群里说，后续交流群人数增多会考虑特色内容，再次感谢大家的支持~