精确捕获HTML5视频的拖动（Seeking）事件：状态管理与性能优化

const video = document.querySelector('video'); // 假设已获取到视频元素

const seekStatus = {
    start: null,
    end: null,
    isSeeking: false
};

const seekingHandler = () => {
    // 只有当不是正在拖动时，才记录为一次新的拖动开始
    if (!seekStatus.isSeeking) {
        seekStatus.start = Math.floor(video.currentTime);
        seekStatus.end = null; // 重置结束时间，为新的拖动做准备
        seekStatus.isSeeking = true;
        console.log(`拖动开始于: ${seekStatus.start}秒`);
    }
};

const seekedHandler = () => {
    // 只有当确实处于拖动状态时，才记录为拖动结束
    if (seekStatus.isSeeking) {
        seekStatus.end = Math.floor(video.currentTime);
        seekStatus.isSeeking = false;
        // 避免记录无效的拖动（例如，开始和结束时间相同，可能是微小抖动）
        if (seekStatus.start !== seekStatus.end) {
            console.log(`拖动结束于: ${seekStatus.end}秒，总时长: ${seekStatus.end - seekStatus.start}秒`);
            // 在这里发送数据到服务器，例如：
            // sendRequest('5', seekStatus).then(() => { /* 清空或处理 */ });
        } else {
            console.log("检测到无效拖动或微小抖动，未记录。");
        }
        // 重置状态，准备下一次拖动
        seekStatus.start = null;
        seekStatus.end = null;
    }
};

video.addEventListener('seeking', seekingHandler);
video.addEventListener('seeked', seekedHandler);

const debounce = (func, delay) => {
    let timeoutHandle = -1; // 用于存储计时器ID

    return (...args) => {
        // 每次事件触发时，如果之前有未执行的计时器，则清除它
        if (timeoutHandle !== -1) {
            clearTimeout(timeoutHandle);
        }
        // 设置新的计时器
        timeoutHandle = setTimeout(() => {
            func(...args); // 在延迟后执行传入的函数
            timeoutHandle = -1; // 执行完毕后重置计时器ID
        }, delay);
    };
};

// 假设seekedHandler是上面定义的那个处理函数
const debouncedSeekedHandler = debounce(seekedHandler, 300); // 300毫秒延迟

// 移除原有的seeked事件监听，使用防抖后的版本
video.removeEventListener('seeked', seekedHandler); // 如果之前已添加
video.addEventListener('seeked', debouncedSeekedHandler);

function throttle(func, wait) {
    let lastExecutionTime = 0; // 上次执行函数的时间戳

    return function(...args) {
        const now = window.performance.now(); // 当前时间戳

        // 如果当前时间与上次执行时间之差大于等于等待时间
        if (now - lastExecutionTime >= wait) {
            func.apply(this, args); // 执行函数
            lastExecutionTime = now; // 更新上次执行时间
        }
    };
}

// 假设seekedHandler是上面定义的那个处理函数
const throttledSeekedHandler = throttle(seekedHandler, 300); // 300毫秒间隔

// 移除原有的seeked事件监听，使用节流后的版本
video.removeEventListener('seeked', seekedHandler); // 如果之前已添加
video.addEventListener('seeked', throttledSeekedHandler);