IndexPage.vue

<script lang="ts">
export default {
  name: 'PAGE5',
};
</script>
<script setup lang="ts">
import { onMounted, onUnmounted, reactive, ref } from 'vue';
// element
import TablePage from './element/table/TablePage.vue';
import AntvX6 from './element/x6/AntvX6.vue';
import RichTextEdit from './element/rich-text-edit/RichTextEdit.vue';
import { useMessage } from 'src/common/hooks';
import { noRepeatObjInArr } from 'src/common/utils';

const { info } = useMessage();

const state = reactive({
  num: 0,
  data: null as any,
  text: null,
});
const timer = ref<any>(null);
const timer2 = ref<any>(null);
const loadingState = ref(false);
const chipText = ref(null);
onMounted(() => {
  getData();
  testIsEmpty();
});
onUnmounted(() => {
  //
});
function getData() {
  setTimeout(() => {
    state.num = 100;
    state.data = {
      name: '张三',
      age: 18,
    };
  }, 10000);
}

function clikeMe() {
  if (state.num && state.data && Object.keys(state.data).length > 0) {
    console.log(state);
    console.log(timer.value);
  } else {
    console.log('为空');
    setTimeout(() => {
      clikeMe();
    }, 1000);
  }
}

function valueChange() {
  debounce(() => {
    // do something
    chipText.value = state.text;
    console.log(state.text);
    loadingState.value = true;
    setTimeout(() => {
      loadingState.value = false;
    }, 2000);
  }, 2000);
}

function clikeMe2() {
  throttle(() => {
    // do something
    console.log('点击');
    info('点击了');
  }, 1000);
}

// 防抖
// 触发事件 n 秒后执行函数，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。
function debounce(func: any, time: number) {
  // setTimeout需是全局变量
  if (timer.value) {
    clearTimeout(timer.value);
    timer.value = null;
  }
  timer.value = setTimeout(() => {
    func();
    clearTimeout(timer.value);
    timer.value = null;
  }, time);
}

// 节流
// 连续触发事件但是在 n 秒中只执行一次函数，如果在 n 秒内又触发了事件，不执行函数
function throttle(func: any, time: number) {
  // setTimeout需是全局变量
  if (timer2.value) {
    clearTimeout(timer2.value);
    timer2.value = null;
  } else {
    func();
  }
  timer2.value = setTimeout(() => {
    clearTimeout(timer2.value);
    timer2.value = null;
  }, time);
}

function testIsEmpty() {
  let arrObj = [
    {
      name: '张三',
      age: 18,
      sex: '男',
      obj: { name: '李四', age: 18 },
      arr: [{ test1: 1, test2: 2 }, 20],
      rule_list: [
        {
          id: 1,
          key_id: '1-1',
          min_fee: { describe: null, setup: null },
          catalog_list: [
            {
              code: 'xscs',
              min_fee: {},
            },
          ],
        },
        {
          id: 2,
          key_id: '1-1',
          min_fee: { describe: null, setup: null },
          catalog_list: [
            {
              code: 'xscs',
              min_fee: {},
            },
          ],
        },
      ],
    },
    {
      name: '张三',
      age: 18,
      sex: '男',
      obj: { name: '李四', age: 18 },
      arr: [20, { test2: 2, test1: 1 }],
      rule_list: [
        {
          id: 1,
          key_id: '1-1',
          min_fee: { describe: null, setup: null },
          catalog_list: [
            {
              code: 'xscs',
              min_fee: {},
            },
          ],
        },
        {
          catalog_list: [
            {
              min_fee: {},
              code: 'xscs',
            },
          ],
          id: 2,
          key_id: '1-1',
          min_fee: { describe: null, setup: null },
        },
      ],
    },
  ];
  let res = noRepeatObjInArr(arrObj);
  console.log('结果 =', res);

  console.log('原始 =', arrObj);
}
</script>
<template>
  <div class="box">
    <TablePage />
    <AntvX6 />
    <RichTextEdit />
    <hr />
    <div>
      <div class="text-h6">防抖与节流</div>
      <q-btn label="初始化10s后我才有数据" color="primary" @click="clikeMe" />
      <q-chip color="primary" text-color="white">
        {{ chipText }}
      </q-chip>
      <q-input
        outlined
        v-model="state.text"
        label="防抖"
        style="width: 300px"
        @update:model-value="valueChange"
        :loading="loadingState"
      />
      <q-btn label="点我执行节流函数" color="primary" @click="clikeMe2" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.box {
  // border: 1px solid red;
}
</style>
<style lang="scss"></style>