我为一些视频here构建了一个iFrame查看器。
它工作得很好，除非有人点击视频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>这表明清除计时器。
备查，
Amadan建议关闭一个计时器并启动另一个计时器是一个很好的计时器，但新计时器仍然使用事件计时器内的原始视频持续时间。我找到的解决方案是使用Ben Alman的jquery插件，名为doTimeout：http://benalman.com/projects/jquery-dotimeout-plugin/
我重写了超时行，原来是：
setTimeout(function(){
reset();}, oMovieDur.val);
如下（'loop'只是一个id）：
$.doTimeout( 'loop', oMovieDur.val, function(){
reset();
});
现在事情正常。感谢Amadan和Ben Alman