【问题标题】:How to consolidate multiple similar functions into a single one?如何将多个相似的功能合并为一个?
【发布时间】:2018-05-26 10:01:34
【问题描述】:

我被困在一段 JavaScript 代码上,该代码在 Youtube API 上应用了一个事件。目标是当您点击相应的按钮时,视频将向后移动 5 秒、10 秒或 30 秒或前进 5 秒、10 秒或 30 秒。

我的问题是我有六个相似但时间值不同的函数。 (在这个例子中,我只放了两个函数:rewind5() 备份 5 秒,rewind10() 备份 10 秒)。

我正在寻找可以帮助我将这两个功能(rewind5()rewind10())组合成一个功能的慈善灵魂。一旦我有了正确的结构,我就可以使用单个函数创建其他四个函数。

我的 JS 文件:

// Rewind 5s

function onPlayerReady(event){
    if(player.getPlayerState()===1 || player.getPlayerState()===2){
        $('#s5back').prop('disabled', false);
        $( '#s5back' ).click(function() {
            rewind5();
            });
    } else {
        $('#s5back').prop('disabled', true);
    }
}

function rewind5() {
    var currentTime = player.getCurrentTime();
    player.seekTo(currentTime - 5, true);
    player.playVideo();

};

// Rewind 10s

function onPlayerReady(event){
    if(player.getPlayerState()===1 || player.getPlayerState()===2){
        $('#s10back').prop('disabled', false);
        $( '#s10back' ).click(function() {
            rewind10();
            });
    } else {
        $('#s10back').prop('disabled', true);
    }
}

function rewind10(){
    var currentTime = player.getCurrentTime();
    player.seekTo(currentTime - 10, true);
    player.playVideo();
};

我的 HTML 文件:

<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: 'ID URL YOUTUBE',
        playerVars: {
            color: 'white',
            controls: 0,
            rel: 0,
            showinfo: 0
        },
        events: {
            onReady: initialize,
            onStateChange: onPlayerReady
        }
    });
}
</script>

【问题讨论】:

    标签: javascript api youtube


    【解决方案1】:

    为什么不只使用一个 seekBy 函数,并传递给它所需的秒数来倒带?

    function seekBy(secs){
      var currentTime = player.getCurrentTime();
      player.seekTo(currentTime + secs, true);
      player.playVideo();
    }
    

    并用例如实现它

    $('#s10back').click(function() {
      seekBy(-10);
    });
    

    或 5 秒、30 或 60。要前进,请改为传递正数:

    $('#s10forward').click(function() {
      seekBy(10);
    });
    

    【讨论】:

    • 当然,只要传递一个正面或负面的参数。最好将其重命名为 rewind 以外的其他名称
    • 你写的答案比我快 :) @SMIIILE 你把负数传递给函数来倒带,正数向前推进
    • 太棒了!非常感谢:)
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2021-09-20
    • 1970-01-01
    • 1970-01-01
    • 2017-05-04
    • 2016-05-25
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多