gdb调试 与 coredump

我们在src跟目录下创建一个utils目录下面创建一个continuousLoading.js
参考代码如下

let value = 0;

export default function(callback) {
  const timer = setInterval(() => {
    if (callback&&(value || value === 0)&&value < 99) {
      value += 1;
      callback(value);
    } else {
      clearInterval(timer);
    }
  }, 500);
}

这里这个描述甚至你也可以改成外面传进来的 我这里就直接设置 500 0.5秒执行一次了
然后每次进来判断 value 如果还小于99就继续 加一 然后回调一下传进来的函数
如果到99了 就直接clearInterval关掉定时器

然后 我们vue组件代码编写如下

<template>
    <div>
        {{ value }}
    </div>
</template>

<script>
import continuousLoading from '@/utils/continuousLoading';

export default {
  data() {
    return {
      value: 0
    }
  },
  created() {
    continuousLoading((value) => {
      this.value = value;
    });
  }
}
</script>

这里 主要是created中 定义了continuousLoading 我们传进去的回调就是 接受到value 然后将接到的value给 data中的响应式的value赋值
因为我们continuousLoading中写了每500后加一回调 传value作为回调函数的参数

这样 我们页面上的值就一直在加 且用于 不会超过99
做出一个正在加载的假象给用户看
甚至我们还可以配合element-ui的组件
参考代码如下

<template>
    <div>
        <el-progress type="circle" :percentage="value"></el-progress>
    </div>
</template>

<script>
import continuousLoading from '@/utils/continuousLoading';

export default {
  data() {
    return {
      value: 0
    }
  },
  created() {
    continuousLoading((value) => {
      this.value = value;
    });
  }
}
</script>

就很完美