Question

我想在特定的时间内显示几张照片。当时间用完时转到下一张图片，此循环循环直到没有更多图片。

我已经尝试过while循环，但他们不能使用我的实现。

这就是我所拥有的：

的JavaScript

/*
*   Set's a timer for the image that's going to be displayed
*
*   @param plan contains the array with the objects that contain the picture path and time
*   @param index index of array
*   @version 1.0
*/
function display(plan, index){
    var exercises = plan.getExercises(); // array

    //  60*1000 -> 1 minute 

    //Displays the image for a 'exercises[index].getDuration() * 1000' period of time
    image(exercises[index].getURL());

    setTimeout(function() {

            //Removes the image when time is up
            var el = document.getElementById("myDiv");
            el.parentNode.removeChild(el);
            gif_acabou = true;

    }, exercises[index].getDuration() * 1000);

}

/*
*   Creates an element and adds it to the HTML <div>
*   
*   @param img_URL - image path
*   @version 1.0
*/
function image(img_URL) {
    var img = document.createElement("IMG");
    img.src = img_URL;
    document.getElementById('myDiv').appendChild(img);

}

Answer 1

我无法测试您的代码，但这是我纠正它的方式：

function display(plan, index) {
  var exercises = plan.getExercises(); // array

  // Displays the image for a 'exercises[index].getDuration() * 1000'
  // period of time
  image(exercises[index].getURL(), function(){
    setTimeout(function() {
      //Removes the image when time is up
      var el = document.getElementById("myDiv");
      el.parentNode.removeChild(el);
      gif_acabou = true;
    }, exercises[index].getDuration() * 1000); //  60*1000 -> 1 minute
  });
}

function image(img_URL, executeAfterLoad) {
  var img = document.createElement("IMG");
  img.addEventListener('load', executeAfterLoad, false);
  img.src = img_URL;
  document.getElementById("myDiv").appendChild(img);  
}

这个想法是图像的加载是异步操作，所以你需要传递一个函数，以便在它完成时得到通知，然后开始计算时间。

Answer 2

这是一种方法，使用自定义元素（webcomponents）。

    class ExerciseDisplay extends HTMLElement {
        constructor() {
            super();       

            this.imageEl = document.createElement("img");
            this.imageEl.setAttribute("width", "350px");
            this.appendChild(this.imageEl);

            this.getWorkout("someurl")
                // this becomes undefined if methods are called from promises,
                // https://stackoverflow.com/questions/34930771/why-is-this-undefined-inside-class-method-when-using-promises/34930859
                .then((workout) => this.showWorkout(workout))
                .catch((err) => { /* show error */ });            
        }        

        getWorkout(url) {
            return new Promise((resolve, reject) => {
                // XMLHttpRequest?
                resolve([
                    {name: "Bharadvajasana I", imageUrl: "https://www.thefitglobal.com/wp-content/uploads/2017/06/Bharadwajasana.jpg", time: "5"},
                    {name: "Padangusthasana", imageUrl: "https://previews.123rf.com/images/giggsy25/giggsy251711/giggsy25171100023/89035549-young-asian-woman-doing-yoga-in-hasta-padangusthasana-or-standing-hand-to-toe-yoga-pose-on-the-mat-i.jpg", time: "15"}
                    // NOTE: last excercise's time is not relevant.
                ]);
            });
        }

        showWorkout(workout) {
            let totalTime = 0;

            for (let i = 0; i < workout.length; ++i) {
                let exercise = workout[i];
                window.setTimeout(() => {this.setImage(exercise.imageUrl);}, totalTime * 1000);                
                totalTime += exercise.time;
            }
        }

        setImage(url) {
            this.imageEl.src = "";
            this.imageEl.src = url;
        }
    };

    window.customElements.define("exercise-display", ExerciseDisplay);

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Excercises</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="import" href="components/excercise-display.html">
</head>
<body>
    <h1>Excercise helper application</h1>

    <exercise-display>
    </exercise-display>

    <script>        
    </script>
</body>
</html>

希望这有帮助！

在一段时间内显示图像

2 个答案: