forked from 77media/video-flow
新增自定义的useUpdateEffect钩子,支持防抖和节流功能,并在useWorkflowData中替换原有useEffect以优化剧本初始化和数据更新逻辑。
This commit is contained in:
parent
5dfa836b2e
commit
38c2ad7ada
57
app/hooks/useUpdateEffect.ts
Normal file
57
app/hooks/useUpdateEffect.ts
Normal file
@ -0,0 +1,57 @@
|
|||||||
|
import { useEffect, useRef, EffectCallback, DependencyList } from "react";
|
||||||
|
|
||||||
|
type Mode = "debounce" | "throttle" | "none";
|
||||||
|
|
||||||
|
interface Options {
|
||||||
|
mode?: Mode;
|
||||||
|
delay?: number; // 毫秒
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* useUpdateEffect - 统一版
|
||||||
|
* 1. 跳过首次执行
|
||||||
|
* 2. 可选防抖/节流
|
||||||
|
*/
|
||||||
|
export function useUpdateEffect(
|
||||||
|
effect: EffectCallback,
|
||||||
|
deps: DependencyList,
|
||||||
|
options: Options = { mode: "none", delay: 0 }
|
||||||
|
) {
|
||||||
|
const { mode = "none", delay = 0 } = options;
|
||||||
|
const isFirstRender = useRef(true);
|
||||||
|
const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||||
|
const lastRunTimeRef = useRef<number>(0);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (isFirstRender.current) {
|
||||||
|
isFirstRender.current = false;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (mode === "none" || delay <= 0) {
|
||||||
|
return effect();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (mode === "debounce") {
|
||||||
|
if (timerRef.current) clearTimeout(timerRef.current);
|
||||||
|
timerRef.current = setTimeout(() => {
|
||||||
|
effect();
|
||||||
|
}, delay);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (mode === "throttle") {
|
||||||
|
const now = Date.now();
|
||||||
|
if (now - lastRunTimeRef.current >= delay) {
|
||||||
|
effect();
|
||||||
|
lastRunTimeRef.current = now;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
if (mode === "debounce" && timerRef.current) {
|
||||||
|
clearTimeout(timerRef.current);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
}, deps);
|
||||||
|
}
|
||||||
@ -6,6 +6,7 @@ import { detailScriptEpisodeNew, getScriptTitle, getRunningStreamData, pauseMovi
|
|||||||
import { useAppDispatch, useAppSelector } from '@/lib/store/hooks';
|
import { useAppDispatch, useAppSelector } from '@/lib/store/hooks';
|
||||||
import { setSketchCount, setVideoCount } from '@/lib/store/workflowSlice';
|
import { setSketchCount, setVideoCount } from '@/lib/store/workflowSlice';
|
||||||
import { useScriptService } from "@/app/service/Interaction/ScriptService";
|
import { useScriptService } from "@/app/service/Interaction/ScriptService";
|
||||||
|
import { useUpdateEffect } from '@/app/hooks/useUpdateEffect';
|
||||||
|
|
||||||
// 步骤映射
|
// 步骤映射
|
||||||
const STEP_MAP = {
|
const STEP_MAP = {
|
||||||
@ -101,7 +102,7 @@ export function useWorkflowData() {
|
|||||||
applyScript
|
applyScript
|
||||||
} = useScriptService();
|
} = useScriptService();
|
||||||
// 初始化剧本
|
// 初始化剧本
|
||||||
useEffect(() => {
|
useUpdateEffect(() => {
|
||||||
if (currentStep !== '0') {
|
if (currentStep !== '0') {
|
||||||
console.log('开始初始化剧本', originalText,episodeId);
|
console.log('开始初始化剧本', originalText,episodeId);
|
||||||
// TODO 为什么一开始没项目id
|
// TODO 为什么一开始没项目id
|
||||||
@ -111,7 +112,7 @@ export function useWorkflowData() {
|
|||||||
mode.includes('auto') && applyScript();
|
mode.includes('auto') && applyScript();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}, [originalText]);
|
}, [originalText], {mode: 'none'});
|
||||||
// 监听剧本加载完毕
|
// 监听剧本加载完毕
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (scriptBlocksMemo.length > 0) {
|
if (scriptBlocksMemo.length > 0) {
|
||||||
@ -121,13 +122,16 @@ export function useWorkflowData() {
|
|||||||
}
|
}
|
||||||
}, [scriptBlocksMemo]);
|
}, [scriptBlocksMemo]);
|
||||||
// 监听继续 请求更新数据
|
// 监听继续 请求更新数据
|
||||||
useEffect(() => {
|
useUpdateEffect(() => {
|
||||||
|
if (currentStep === '6') {
|
||||||
|
return;
|
||||||
|
}
|
||||||
if (isPauseWorkFlow) {
|
if (isPauseWorkFlow) {
|
||||||
pauseMovieProjectPlan({ project_id: episodeId });
|
pauseMovieProjectPlan({ project_id: episodeId });
|
||||||
} else {
|
} else {
|
||||||
resumeMovieProjectPlan({ project_id: episodeId });
|
resumeMovieProjectPlan({ project_id: episodeId });
|
||||||
}
|
}
|
||||||
}, [isPauseWorkFlow]);
|
}, [isPauseWorkFlow], { mode: "debounce", delay: 1000 });
|
||||||
|
|
||||||
// 自动开始播放一轮
|
// 自动开始播放一轮
|
||||||
const autoPlaySketch = useCallback(() => {
|
const autoPlaySketch = useCallback(() => {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user