如何将多个相似的YouTube API时间跳转函数合并为一个？

看起来你在实现YouTube播放器的快进后退功能时遇到了代码冗余的问题——重复写6个逻辑几乎一致的函数确实不够高效，我来帮你重构代码，用通用函数+自定义数据属性的方式彻底解决这个问题，同时还能修复原代码里的隐藏bug。

先说说原代码的问题 #

你重复定义了onPlayerReady函数，这会导致后面的函数覆盖前面的，最终只有最后一个按钮的逻辑能生效；另外每个按钮都写了几乎一样的事件绑定和时间调整逻辑，维护起来非常麻烦。

第一步：重构HTML按钮，添加自定义数据属性 #

给所有快进/后退按钮加上data-seek-offset属性，用负数表示后退，正数表示前进，这样我们就能通过这个属性传递时间参数：

<!-- 后退按钮 -->
<button id="s5back" data-seek-offset="-5">后退5秒</button>
<button id="s10back" data-seek-offset="-10">后退10秒</button>
<button id="s30back" data-seek-offset="-30">后退30秒</button>

<!-- 前进按钮 -->
<button id="s5forward" data-seek-offset="5">前进5秒</button>
<button id="s10forward" data-seek-offset="10">前进10秒</button>
<button id="s30forward" data-seek-offset="30">前进30秒</button>

<div id="video-placeholder"></div>
<script type="text/javascript">
var player, time_update_interval = 0;

function onYouTubeIframeAPIReady() {
    player = new YT.Player('video-placeholder', {
        width: '100%',
        height: '625px',
        videoId: 'YOUR_VIDEO_ID', // 替换成你的视频ID
        playerVars: {
            color: 'white',
            controls: 0,
            rel: 0,
            showinfo: 0
        },
        events: {
            onReady: initialize,
            onStateChange: onPlayerStateChange // 这里替换原重复的onPlayerReady，避免函数覆盖
        }
    });
}
</script>

第二步：编写通用的时间调整函数 #

只需要一个函数，就能处理所有按钮的时间调整需求，逻辑统一且易于维护：

// 通用播放时间调整函数
function adjustPlaybackTime(offset) {
    if (!player) return; // 确保播放器已初始化
    const currentTime = player.getCurrentTime();
    const newTime = Math.max(0, currentTime + offset); // 防止时间小于0
    player.seekTo(newTime, true);
    player.playVideo(); // 调整后自动继续播放
}

第三步：统一处理按钮的状态和点击事件 #

把原来分散的按钮启用/禁用、点击事件绑定逻辑合并成两段代码，批量处理所有按钮：

// 初始化播放器时的按钮配置
function initialize() {
    // 初始状态禁用所有按钮
    $('[data-seek-offset]').prop('disabled', true);
    // 给所有按钮绑定点击事件
    $('[data-seek-offset]').click(function() {
        const offset = parseInt($(this).data('seek-offset'), 10);
        adjustPlaybackTime(offset);
    });
}

// 监听播放器状态变化，动态控制按钮可用性
function onPlayerStateChange(event) {
    // 只有播放或暂停状态下才启用按钮
    const isPlayable = event.data === YT.PlayerState.PLAYING || event.data === YT.PlayerState.PAUSED;
    $('[data-seek-offset]').prop('disabled', !isPlayable);
}

完整整合后的JS代码 #

把所有逻辑整合到一起，就是最终的优化版本：

var player, time_update_interval = 0;

function onYouTubeIframeAPIReady() {
    player = new YT.Player('video-placeholder', {
        width: '100%',
        height: '625px',
        videoId: 'YOUR_VIDEO_ID',
        playerVars: {
            color: 'white',
            controls: 0,
            rel: 0,
            showinfo: 0
        },
        events: {
            onReady: initialize,
            onStateChange: onPlayerStateChange
        }
    });
}

function initialize() {
    $('[data-seek-offset]').prop('disabled', true);
    $('[data-seek-offset]').click(function() {
        const offset = parseInt($(this).data('seek-offset'), 10);
        adjustPlaybackTime(offset);
    });
}

function onPlayerStateChange(event) {
    const isPlayable = event.data === YT.PlayerState.PLAYING || event.data === YT.PlayerState.PAUSED;
    $('[data-seek-offset]').prop('disabled', !isPlayable);
}

function adjustPlaybackTime(offset) {
    if (!player) return;
    const currentTime = player.getCurrentTime();
    const newTime = Math.max(0, currentTime + offset);
    player.seekTo(newTime, true);
    player.playVideo();
}

这样修改后，你不仅消除了代码冗余，还修复了原代码中函数覆盖的问题，以后如果要新增其他时长的调整按钮，只需要添加一个带对应data-seek-offset属性的按钮即可，完全不用修改JS逻辑。

内容的提问来源于stack exchange，提问作者SMIIILE