javascript - 如何将多个相似的功能合并为一个?
问题描述
我被困在一段 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>
解决方案
为什么不只有一个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);
});
推荐阅读
- ios - 在函数运行之前阻止 segue 执行
- c++ - 在条件语句中使用大括号会导致性能稍低
- javascript - 谷歌电子表格脚本在从单元格读取时将逗号更改为句号?
- android - 如何在实时多人游戏 API 中将玩家带到等候室
- java - 如何在android服务中接收LocalBroadcast
- python - 计算反转次数
- python - 使用 for 循环遍历嵌套字典
- css - vue组件上的内联css
- javascript - ECMAScript 6 是否支持 ECMAScript 5 的所有语言特性?ES6 是 ES5 的超集吗?
- python - 如何将卷积层的输出显示为图像?