Question

我为某些视频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&amp;controls=0&amp;">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>

Answer 1

计时器无法更新＆＃34;。如果oMovieDur.val为3600000，则您将3600000传递给setTimeout，而不是oMovieDur.val引用，并且计时器将在一小时后触发，无论如何你以后会去oMovieDur。

你应该识别你的计时器，如果它不再相关就把它关闭（即你开了一部新电影而你正准备制作一个新计时器。）

var resetTimer = null;

// ...

clearTimeout(resetTimer);
resetTimer = setTimeout(function(){
        reset();}, oMovieDur.val);

示例代码：

＆＃13;

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);
});

＆＃13;

<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>

＆＃13;

这表明清除计时器。

Answer 2

供将来参考，

Amadan建议关闭一个计时器并启动另一个计时器是一个好计时器，但新计时器仍然使用事件计时器内的原始视频持续时间。我找到的解决方案是使用Ben Alman的一个名为doTimeout的jquery插件：http://benalman.com/projects/jquery-dotimeout-plugin/

我重写了超时行，原来是：

setTimeout(function(){
    reset();}, oMovieDur.val);

如下（＆＃39;循环＆＃39;只是一个ID）：

$.doTimeout( 'loop', oMovieDur.val, function(){
reset();
});

现在事情正常了。感谢Amadan和Ben Alman

事件处理程序中的setTimout

2 个答案: