Javascript - 需要重复功能

Question

这是我第一次使用stackoverflow :)我使用javascript创建了一个用于播放带有计时器的视频的交互。 交互是...视频将默认暂停，并在3秒后开始播放。 同样的事情我要重复三次。 我们可以这样做吗？ 我在这里分享了我的代码。

var timeLeft = 3;
var elem = document.querySelector('.countdown-content__count');
var timerId;

function countdown() {
  if (timeLeft == 0) {
    clearTimeout(timerId);
    $(".countdown-content__timer").fadeOut();
    $(".video-wrapper span").fadeOut();
    var playPromise = $("#video")[0].play();
    console.log(playPromise); 
  } else {
    elem.innerHTML = timeLeft;
    timeLeft--;
  }
}

function practiceShot(){
  setTimeout(function(){
    $(".countdown-content__head").slideUp(1000,               function(){
          $(".countdown-content__timer").css({
              opacity: 0,
              display: 'inline-block'     
          }).animate({opacity:1},600);
          timerId = setInterval(countdown, 1000);
          countdown();
        });
      }, 2000);
}
practiceShot();

jfiddle链接以获得更多说明： jsfiddle代码

Answer 1

您应该在setInterval调用practiceShot() ，而不是在practiceShot()中使用setTimeout()

 setInterval(function(){ practiceShot(); }, 2000);

setInterval（）方法以指定的时间间隔（以毫秒为单位）调用函数或计算表达式。 setInterval（）方法将继续调用该函数，直到调用 clearInterval（）或关闭窗口。

有关详细信息： setInterval（）方法

Answer 2

您可以尝试这一点 - 我已经在视频ended事件上应用了addEventListener ，并使用videoCounter变量仅运行视频3次。 它被初始化为2并在视频结束时递减。

 var timeLeft = 3; var videoCounter = 2; var videoText = 2; var elem = document.querySelector('.countdown-content__count'); var timerId; function countdown() { if (timeLeft == 0) { clearTimeout(timerId); $(".countdown-content__timer").fadeOut(); $(".video-wrapper span").fadeOut(); var playPromise = $("#video")[0].play(); } else { elem.innerHTML = timeLeft; timeLeft--; } } function practiceShot(){ setTimeout(function(){ $(".countdown-content__head").slideUp(1000, function(){ $(".countdown-content__timer").css({ opacity: 0, display: 'inline-block' }).animate({opacity:1},600); timerId = setInterval(countdown, 1000); countdown(); }); }, 2000); } practiceShot(); document.getElementById('video').addEventListener('ended', function() { if (videoCounter == 0) { return; } document.getElementsByClassName("countdown-content__head")[0].innerHTML = "Practice Shot " + videoText; videoText++; videoCounter--; timeLeft = 3; elem.innerHTML = ""; $(".countdown-content__timer").fadeIn(); $(".video-wrapper span").fadeIn(); $(".countdown-content__head").slideDown(1000, function(){ $(".countdown-content__timer").css({ opacity:1, display: 'inline-block' }).animate({opacity:0},600); }); practiceShot(); }, false); 

 @import url("https://fonts.googleapis.com/css?family=Fjalla+One"); html, body { margin: 0; height: 100%; font-family: 'Fjalla One', sans-serif; } .main-content { height: 100%; text-align: center; } .video-wrapper { height: 100%; display: inline-block; position: relative; } .video-wrapper span { content: ''; display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: #FBED20; opacity: 0.7; } .video-wrapper > video { height: 100%; margin: 0 auto; display: block; position: relative; } .countdown-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .countdown-content__head { margin: 0; } .countdown-content__timer { margin: 10px 0 0 0; font-size: 24px; width: 100px; height: 100px; border-radius: 50%; border: 1px solid #fff; position: relative; opacity: 0; } .countdown-content__timer > span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: inline-block; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="main-content"> <span class="video-wrapper"> <video id="video" muted> <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> <source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg"> Your browser does not support HTML5 video. </video> <span></span> </span> <div class="countdown-content"> <h1 class="countdown-content__head">Practice Shot 1</h1> <div class="countdown-content__timer"> <span class="countdown-content__count"></span> </div> </div> </div> 

Answer 3

你可以使用setInterval() ， clearInterval()和一个简单的计数器来重复某些特定的次数。

例：

var counter = 0;
var interval_id = setInterval(() => {
  play_video();
  counter++;
  if (counter >= 3) {
    clearInterval(interval_id)
  }
}, 3000);

Answer 4

在视频元素上使用onended事件处理程序，

var timeLeft = 3;
var elem = document.querySelector('.countdown-content__count');
var timerId;
var times = 0 ;
var vid = document.getElementById("video");
vid.onended = function() {
    times++;
    console.log(times);
    times==3 ? $("#video")[0].pause() : $("#video")[0].play();;
};

function countdown() {
    if (timeLeft == 0) {
        clearTimeout(timerId);
        $(".countdown-content__timer").fadeOut();
        $(".video-wrapper span").fadeOut();
        var playPromise = $("#video")[0].play();
        console.log(playPromise);
    } else {
        elem.innerHTML = timeLeft;
        timeLeft--;
    }
}

function practiceShot() {
    $(".countdown-content__head").slideUp(1000, function () {
        $(".countdown-content__timer").css({
            opacity: 0,
            display: 'inline-block'
        }).animate({opacity: 1}, 600);
        timerId = setInterval(countdown, 1000);
        countdown();
    });
}
practiceShot();