在事件处理程序中设置超时

setTimout within event handler

本文关键字：设置 超时 程序 事件处理      更新时间：2023-09-26

我在这里为一些视频构建了一个iFrame查看器。

它工作得很好，除了当有人点击视频A的按钮，然后点击视频B的按钮，而视频A仍在播放。当视频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>

计时器不能"更新"。如果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关闭一个计时器并启动另一个计时器的建议很好，但是新的计时器仍然在事件计时器中使用原始的视频持续时间。我发现的解决方案是使用一个名为doTimeout的jquery插件Ben Alman: http://benalman.com/projects/jquery-dotimeout-plugin/

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

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

如下所示('loop'只是一个id):

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

，现在一切正常工作。感谢Amadan和Ben Alman

相关文章：