运行时提示options.onChange?.(current.value);出错,页面无法展示
来源:5-24 -自定义hooks-useCountDown 实现倒计时逻辑-03
weixin_慕丝6100415
2023-02-13
老师,您 好,控制台打印的出错信息如下:
useCoutndown.ts文件如下:
import { ref, computed } from “vue”;
import { rAF, cancelRAF } from “@/utils/raf”;
type CurrentTime = {
days: number;
hours: number;
minutes: number;
seconds: number;
milliseconds: number;
total: number;
};
type UseCountdownOptions = {
time: number;
milliseconds?: boolean;
onChange?: (current: CurrentTime) => void;
onFinish?: () => void;
};
const SECOND = 1000;
const MINUTE = 60 * 1000;
const HOUR = 60 * MINUTE;
const DAY = 24 * HOUR;
const parseTime = (time: number) => {
const days = Math.floor(time / DAY);
const hours = Math.floor((time % DAY) / HOUR);
const minutes = Math.floor((time % HOUR) / MINUTE);
const seconds = Math.floor((time % minutes) / SECOND);
const milliseconds = Math.floor(time % SECOND);
return {
days,
hours,
minutes,
seconds,
milliseconds,
total: time
};
};
const isSameSecond = (time1: number, time2: number) => {
return Math.floor(time1 / SECOND) === Math.floor(time2 / SECOND);
};
export function useCountdown(options: UseCountdownOptions) {
let rafId: number;
// 倒计时结束时间
let endTime: number;
let counting: boolean;
const remain = ref(options.time);
const current = computed(() => parseTime(remain.value));
const start = () => {
if (!counting) {
endTime = Date.now() + remain.value;
counting = true;
tick();
}
};
const tick = () => {
if (options.milliseconds) {
microTick();
} else {
macroTick();
}
};
const macroTick = () => {
rafId = rAF(() => {
if (counting) {
// 当时剩余的倒计时时间
const remainRemain = getCurrentRemain();
if (!isSameSecond(remainRemain, remain.value) || remainRemain === 0) {
setRemain(remainRemain);
}
if (remain.value > 0) {
macroTick();
}
}
});
};
const microTick = () => {
rafId = rAF(() => {
if (counting) {
const remainRemain = getCurrentRemain();
setRemain(remainRemain);
if (remain.value > 0) {
microTick();
}
}
});
};
const getCurrentRemain = () => Math.max(endTime - Date.now(), 0);
const setRemain = (value: number) => {
remain.value = value;
options.onChange?.(current.value);
if (value === 0) {
pause();
options.onFinish?.();
}
};
const pause = () => {
counting = false;
cancelRAF(rafId);
};
const reset = (totalTime = options.time) => {
pause();
remain.value = totalTime;
};
return {
start,
pause,
reset,
current
};
}
countDown.vue文件内容如下:
{{ padStart(current.hours) }}
:
{{ padStart(current.minutes) }}
:
{{ padStart(current.seconds) }}
1回答
-
one_pieces
2023-02-13
同学你好,看截图报错你好像用了 webpack?而且 app.js 是 js 文件,直接引用 ts 肯定不行……同学可以按照前面的章节创建项目哈~
042023-02-14
相似问题