Javascript If else 语句只返回'else'

Question

我正在尝试将字幕与HTML中的视频标记同步，并使用for循环来迭代这个JSON对象：

var sub_info = [
{"id": 10, "start": "3.920", "end": "6.840", "text": "subtitle text" },
{"id": 11, "start": "7.500", "end": "10.820", "text": "sample sub text"},
]

这是我为这个目的写的for循环：

function myFunc() {
for (var info of sub_info) {
if( videoPlayer.currentTime >= info.start && videoPlayer.currentTime <= info.end ) {
subtitles.innerHTML = info.text
} else {
subtitles.innerHTML = " "
}
}
}

当我只在效果良好的情况下写作，但问题是我不想在没有对话的情况下显示任何字幕。当我添加else时，它只返回else。

我也在for循环之外尝试过subtitles.innerHTML = " "，但仍然不起作用。

我做错了吗？

Answer 1

问题是您每次都要对所有字幕进行测试，所以它只对最后一个字幕有效。

代替更新字幕的循环，执行.find以获得活动字幕，如果有，则更新。如果没有，则清除。

类似的东西

function myFunc() {
const activeSubtitle = sub_info.find(
(sub) =>
parseFloat(sub.start) <= videoPlayer.currentTime &&
parseFloat(sub.end) >= videoPlayer.currentTime
);
if (activeSubtitle) {
subtitles.innerHTML = activeSubtitle.text;
} else {
subtitles.innerHTML = " ";
}
}