我为一些视频构建了一个 iFrame 查看器 here .
它工作得很好，除非有人在视频 A 仍在播放时单击视频 A 的按钮，然后单击视频 B 的按钮。当视频 A 结束并切断视频 B 时，查看器将关闭。
我已经阅读了很多有关在其他函数中使用 setTimeout 的问题和答案。我认为问题在于 setTimeout 从视频 A 获取持续时间信息，并且在单击视频 B 时没有更新，通常称为“此”问题。
我已经阅读了很多问题和答案，并尝试了很多解决方案，但我无法使其发挥作用。这是我的第一个 javascript 项目，因此非常感谢您的帮助。这是代码的简化版本:
***
<body>
***
//The buttons contain data for the viewer, including the video's duration and the YouTube address. This is a sample button:
<div id="MovieButtons" class="MovieButtons">
<button class="MovieButton" data-MovieId="Memorial" data-MovieDur="2740000" data-MovieAdr="https://www.youtube.com/embed/sMVZbMxD-Xw?autoplay=1&controls=0&">Memorial Video</button>
</div> <!--End Moviebuttons-->
<script language="JavaScript" type="text/javascript" src="jquery_3.1.0.min.js"></script>
<script>
$(document).ready(function(){
//initial state has the viewer hidden. It appears when a movie is clicked.
$("#viewer").hide();
//declaring global variables -- the .val property will be assigned inside the function.
var MovieId = {};
var MovieDur = {};
var MovieAdr = {};
//When a movie is clicked, viewer gets its info from the button,
$(".MovieButton").on("click", function(){
MovieId.val= $(this).attr("data-MovieId");
MovieDur.val= Number($(this).attr("data-MovieDur"));
MovieAdr.val= $(this).attr("data-MovieAdr");
//shows the viewer
$("#viewer").show();
//viewer loads movie and plays
$("#viewer").html("<iframe src="+oMovieAdr.val+" width=\"560\" height=\"315\" style=\"position:relative; left: 22%; top:0%; frameborder=\"1\" allowfullscreen></iframe>");
//Reset mechanism closes the viewport and hides the stop button, also restores normal page look. This is where the problem is.
function reset(){
$("#viewer").hide();
$("#viewer").html("<iframe src= none></iframe>");
};
//Automatically closes viewport when the movie ends.
setTimeout(function(){
reset();}, oMovieDur.val);
}); //end of $(".oMovieButton").on("click", function(){
}); //end of $(document).ready(function(){
</script>
最佳答案
计时器无法“更新”。如果 oMovieDur.val 为 3600000，则您将 3600000 传递到 setTimeout，而不是 oMovieDur.val 引用，计时器将在一小时后触发，无论您稍后对 oMovieDur 执行什么操作。
您应该确定您的计时器，如果它不再相关(即您开始了一部新电影并且即将制作一个新计时器)，请将其关闭。
var resetTimer = null;
// ...
clearTimeout(resetTimer);
resetTimer = setTimeout(function(){
reset();}, oMovieDur.val);
示例代码:
var timer = null;
$('button').click(function(evt) {
var name = $(this).data('name');
console.log("started", name, "(ending in 3s)");
if (timer) {
clearTimeout(timer);
console.log("aborted the previous", name);
}
timer = setTimeout(function() {
timer = null;
console.log("ended", name);
}, 3000);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button data-name="A">start A</button>
<button data-name="B">start B</button>这演示了清除计时器。
关于javascript - 事件处理程序中的 setTimeout，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39262469/