我想在特定时间内显示几张图片。当时间用尽时，请转到下一张图片，此循环循环直到没有更多图片。
我已经尝试过并且在循环时，但它们不适用于我的实施。
这是我拥有的：
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);
}
我无法测试您的代码，但这就是我的纠正方式：
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);
}
想法是图像的负载是异步操作，因此您需要通过它传递一个函数才能在完成时通知，然后开始计数时间。
这是使用自定义元素(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> 希望这会有所帮助！