window.setTimeout() problems

Question

我是vue js的新手，我正在尝试在我的网页上同时显示两个图像。举例来说，每个图像都有自己的设置，如imagePosition(左或右(和imagedisplayTime(显示2秒(。所以，让我们考虑这个场景，我有两个图像。

image1：设置(右侧显示，2秒(

image2：设置(左侧显示，2秒(

为了在网站上显示这些图像，我使用了以下功能：

callablelayout_assistant: function(new_layout, new_index, loop_time){
if (new_layout === 1) {
var position = this.loop_objects[new_index].position;
if (position === 0) {
this.left_timer = window.setTimeout(
this.leftLoop.bind(undefined, new_index, new_layout), loop_time);
} else if (position === 1) {
this.right_timer = window.setTimeout(
this.rightLoop.bind(undefined, new_index, new_layout), loop_time);
}
} else if (new_layout === 2) {
var position = this.loop_objects[new_index].position;
if (position === 0) {
this.left_timer = window.setTimeout(
this.leftLoop.bind(undefined, new_index, new_layout), loop_time);
} else if (position === 1) {
this.right_timer = window.setTimeout(
this.rightLoop.bind(undefined, new_index, new_layout), loop_time);
} else if (position == 2) {
this.bottom_timer = window.setTimeout(
this.bottomLoop.bind(undefined, new_index, new_layout), loop_time);
}
}
else {
clearTimeout(this.timer)
this.timer = window.setTimeout(
this.fullLoop.bind(undefined, new_index, new_layout), loop_time);
}
},

在这里，我检查图像的位置是否是"右侧"，我称之为"右侧循环函数"。或者左边，我称之为leftLoop函数。此外，我使用"window.settimeout(("在屏幕上显示图像，但问题是我一次只能显示一个图像，因为"settimeout"只会根据前一个图像的"循环时间"显示下一个图像。然而，我想要的是，将两个图像同时显示在网络屏幕上，与他们自己的时间有关。有什么建议吗？如果有任何帮助，我将不胜感激！

Answer 1

当您想要使用vue.js时，您需要研究vue组件来完成您在这里需要的东西。

然后，如果控制组件内的图像渲染，则可以显示组件的两个实例，以props形式传递其循环时间。由于组件的每个实例都可以在其自己的data中跟踪其循环时间，因此它将能够根据该循环时间来呈现自己。