我正在尝试播放同时出现定时文本的音频文件。当按下“播放”按钮时,会选择一个随机音频文件并加载其字幕和时间。然后使用 setTimeouts 循环在正确的时间用适当的文本替换现有文本。
这似乎工作正常,但问题是我需要能够中断音频并让字幕停止并在我按下“播放”时能够再次工作。
这是我的代码的最小“工作”版本:
var playing = false;
var timeout;
var allSubs = [
"A1 | A2 | A3",
"B1 | B2 | B3 | B4",
"C1 | C2 | C3 | C4 | C5",
]
var allTimings = [
"0 | 2 | 4",
"0 | 1 | 2 | 3",
"0 | 0.5 | 1 | 1.5 | 2",
]
function playAudio() {
playing = true;
$('#media-control').text('Stop');
index = Math.floor(Math.random() * Math.floor(3));
var subtitleStr = allSubs[index];
var timingStr = allTimings[index];
subtitleArr = subtitleStr.split(' | ');
timingArr = timingStr.split(' | ').map(Number);
for (i = 0; i < subtitleArr.length; i++) {
timeout = setTimeout((function(i) {
return function() {
$('#subtitle-text').text(subtitleArr[i]);
}
})(i), timingArr[i] * 1000);
}
}
function stopAudio() {
playing = false;
clearTimeout(timeout);
$('#media-control').text('Play');
$('#subtitle-text').text('');
}
function toggleMedia(e) {
if (!playing) {
playAudio();
} else {
stopAudio();
}
}
$('#media-control').bind('click', toggleMedia);
https://jsfiddle.net/eshapiro42/bjme90yt/12/
如果您快速连续按“播放”/“停止”足够多次,最终字幕会以正确的顺序和正确的时间停止出现。
有人可以推荐一种更好的创建定时文本的方法,或者一种中断 setTimeout 循环的方法,它实际上是确定性地工作的吗?
最佳答案
在我看来,您的问题出在 playAudio 函数中。您一次遍历所有字幕,并为每个字幕设置超时。当您设置下一个超时时,您将覆盖上一个超时的 ID。因此,当您按下暂停时,唯一真正被取消的超时是最后一个。
您需要做的是存储这些超时 ID 的数组。当您进行新的超时时推送到阵列。当您按下暂停时,清除该数组中的所有超时。
var allTimeouts = [];
...
allTimeouts.push(timeout); // On setting the timeouts
...
for(int i = 0; i < allTimeouts.length; i++){ // On clearing the timeouts
clearTimeout(allTimesouts[i]);
}
关于javascript - 中断并重新启动 setTimeouts 循环,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58244361/